Camen Design Forum

Video Embedding

Martijn

This one is super easy as you could just take the entire link and wrap it in an iframe. The YouTube one is actually a little more complex as it accepts all sorts of YouTube URLs to make it easier on people to embed videos.

I will treat the LiveLeak URL you gave me as a generic URL and approach it like the YouTube one. This hopefully means it will be easier to learn how I did it, and means you could extend it to allow regular LiveLeak links to work too!

First we need to make a regular expression that matches the link and is able to extract the data we need. In this case we are going to extract the video ID (360a735f2f1a). You can use an online tool like https://regex101.com/ to test regular expressions.

I want to match HTTP and HTTPS, and with and without `www.`. We can use the start of the YouTube regular expression for this: `https?://(?:www\.)?`. Now this needs to be followed by the LiveLeak domain `liveleak.com`. After that you could have some branching paths to support different URL formats (e.g. if you also want links to the video page to work) but for now we are just going to match `/ll_embed?f=`. Lastly we use a capturing group to capture the video ID, again much like the YouTube one does: `([a-z0-9]+)`.

Together this gives us the folowing regular expression: `https?://(?:www\.)?liveleak.com/ll_embed\?f=([a-z0-9]+)`. Take a look at https://regex101.com/r/kg8Sgj/1 for the test and explanation.

We add this below the “Parsing image URLs” regular expression in the code, putting another `|` (an or) in between just like between the YouTube and image one:

%
			preg_match('~(?:
				https?://(?:www\.)?youtu(?:be\.com/(?:embed/|watch\?(?:.+&)?v=)|\.be/)([a-z0-9_\-]+) # Parsing YouTube URLs.
				|
				(.+\.(?:png|jpe?g|gif)) # Parsing image URLs.
				|
				https?://(?:www\.)?liveleak.com/ll_embed\?f=([a-z0-9]+) # Parsing LiveLeak embed URLs.
			)~ixA', $link, $matches)
%

Now whenever the third item in `$matches` has a string in it, it will be because our LiveLeak regular expression matched and extracted a video ID for us! So we will write a new `else if` block to check that:

%
			else if (strlen($matches[3])) { // We found a LiveLeak video.
				
			}
%

Inside there we can do any extra processing code we want. As long as it sets the variable `$replace` to some HTML in the end the rest of the code will take care of embedding. Since your embed is just an iframe, we can look at how the YouTube one does it. But instead of `$matches[1]` we will use `$matches[3]` to get at the LiveLeak video ID instead:

%
				$replace = '<iframe width="640" height="360" src="https://www.liveleak.com/ll_embed?f=' . $matches[3] . '" frameborder="0" allowfullscreen="allowfullscreen">' . safeHTML($link) . '</iframe>';
%

Note that we made a small change to your HTML: we use `allowfullscreen="allowfullscreen"` instead of `allowfullscreen`. This is because we are working with XML instead of HTML and an attribute completely without value isn’t accepted.

Now we have added LiveLeak support!

Final block for theme.php:

%
    foreach ($template->query('//article/div/p[a and count(*)=1 and not(normalize-space(text()))]') as $node) {
		$link = trim($node->nodeValue);
		$replace = false;

		if (
			preg_match('~(?:
				https?://(?:www\.)?youtu(?:be\.com/(?:embed/|watch\?(?:.+&)?v=)|\.be/)([a-z0-9_\-]+) # Parsing YouTube URLs.
				|
				(.+\.(?:png|jpe?g|gif)) # Parsing image URLs.
				|
				https?://(?:www\.)?liveleak.com/ll_embed\?f=([a-z0-9]+) # Parsing LiveLeak embed URLs.
			)~ixA', $link, $matches)
		) {
			if (strlen($matches[1])) { // We found a YouTube video.
				$replace = '<iframe src="http://www.youtube-nocookie.com/embed/' . $matches[1] . '?autoplay=0&amp;rel=0" frameborder="0" allowfullscreen="allowfullscreen">' . safeHTML($link) . '</iframe>';
			} else if (strlen($matches[2])) { // We found an image link.
				$replace = '<a href="' . safeHTML($link) . '"><img src="' . $matches[2] . '" alt="' . safeHTML($link) . '" /></a>';
			} else if (strlen($matches[3])) { // We found a LiveLeak video.
				$replace = '<iframe width="640" height="360" src="https://www.liveleak.com/ll_embed?f=' . $matches[3] . '" frameborder="0" allowfullscreen="allowfullscreen">' . safeHTML($link) . '</iframe>';
			}
		}

		if ($replace) {
			$frag = $node->ownerDocument->createDocumentFragment();
			if (!@$frag->appendXML($replace) || !@$node->parentNode->replaceChild($frag, $node)) {
				throw new Exception("Invalid HTML");
			}
		}
	}
%

Append

(Leave this as-is, it’s a trap!)

Only the original author or a moderator can append to this post.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn