Camen Design Forum

Video Embedding

append delete rex

Currently I am using the following code in *theme.php*

Posted by *Martijn*

%

 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.
			)~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>';
			}
		}

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

My question is how do you go about adding support for other video services namely liveleak and vimeo?

Any help here would be greatly appreciated

Reply RSS

Replies

append delete #1. Martijn

You will need 2 things to add support for a service:

1. The HTML that you will need to put in place of the URL. Examples of this can be seen on the lines starting with `$replace`.
2. A regular expression that parses the URL of the service and can extract whatever data (like a video ID) you need in the HTML.

You can extend the current regular expression with as many URLs as you would like it to match. So adding liveleak and vimeo doesn’t have to be a problem. But you’ll need to know a little about regular expressions.

After extending it you can add another `if` block with another `$replace` value. That’s it. I am happy to answer some more specific questions, of course!

append delete #2. Rex

Sorry martijn im not particularly proficient in php. Could you give an example just using liveleak. That may help for comparison and make it easier for me to add support for vimeo and others later. Thanks in advance for any help you can lend.

append delete #3. Martijn

@Rex sure, I could add Liveleak and explain the steps!

Could you provide me with an example Liveleak URL and the HTML you want it to get turned into? I am not familiar with Liveleak myself.

append delete #4. rex

I would like it to work just like the youtube videos. Just insert the video embed link

https://www.liveleak.com/ll_embed?f=360a735f2f1a

Here is the HTML embed code.

<iframe width="640" height="360" src="https://www.liveleak.com/ll_embed?f=360a735f2f1a" frameborder="0" allowfullscreen></iframe>

append delete #5. 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");
			}
		}
	}
%
#6. rex

This post was deleted by its owner

append delete #7. rex

Martijn thank you for the awesome response. I appreciate all your help. I took it a step further and added dailymotion also. I rarely see vimeo videos posted on message boards. If it is requested later on down the road I may add it, and may even have to refer back to this excellent response.

Thank you so much for your help!

%
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.  
                |  
                https?://(?:www\.)?dailymotion.com/embed/video/([a-z0-9]+) # Parsing Dailymotion URLs.         
            )~ixA', $link, $matches)  
        ) {  
            if (strlen($matches[1])) { // We found a YouTube video.  
                $replace = '<iframe src="https://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>';   
            } else if (strlen($matches[4])) { // We found a Dailymotion video.  
                $replace = '<iframe width="640" height="360" src="https://www.dailymotion.com/embed/video/' . $matches[4] . '" 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 delete #8. Jon2345

Testing message

Reply

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

There is no need to “register”, just enter the same name + password of your choice every time.

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

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn