Second Crack Bookmarklet For Embedding Videos
So far, Second Crack has been really nice for blogging. The included bookmarklets have been indispensable for drafting quick links from my iPhone or iPad, but there's no easy way to post videos. I watch tons of videos on the web, and would love to be able to share them here. So I created a bookmarklet that makes it simple to do that.
This is the first time I've ever worked with PHP, so I'm definitely out of my comfort zone. But I'm pleased with my implementation. The bulk of the functionality relies on two functions:
get_html uses cURL to easily return the HTML of the current page as a string:
function get_html($url) {
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
Pretty straightforward. By setting CURLOPT_RETURNTRANSFER to TRUE, curl_exec is returned as a string instead of being output directly.
video_embed finds the ID of the video and returns an HTML iframe for embedding:
function video_embed($html) {
$vimeo = array('#player.vimeo.com/video/([0-9]*)#i');
$youtube = array('#/embed/([0-9a-z_-]+)#i', '#youtu.be/([0-9a-z_-]+)#i', '#/v/([0-9a-z_-]+)#i', '#v=([0-9a-z_-]+)#i');
for ($i = 0; $i < sizeof($vimeo); $i++) {
preg_match($vimeo[$i], $html, $id);
if ($id[1] != NULL) {
return '<iframe src="http://player.vimeo.com/video/' . $id[1] . '?title=0&byline=0&portrait=0&color=ff0000&fullscreen=1&autoplay=0" frameborder="0"></iframe>';
}
}
for ($i = 0; $i < sizeof($youtube); $i++) {
preg_match($youtube[$i], $html, $id);
if ($id[1] != NULL) {
return '<iframe src="http://www.youtube.com/embed/' . $id[1] . '?autohide=1&fs=1&autoplay=0&iv_load_policy=3&rel=0&modestbranding=1&showinfo=0&hd=1" frameborder="0" allowfullscreen></iframe>';
}
}
return NULL;
}
The first two lines create arrays of regex patterns for video IDs of both embedded and non-embedded videos.1
preg_match then searches for a match in the HTML and returns an array called $id. $id[0] has the full text of the regex match and $id[1] has the text that matches the first captured parenthesized subpattern (i.e., just the video ID). Upon a match, embed code is returned with $id[1]'s value in place.
Notes:
-
This bookmarklet only works for YouTube and Vimeo videos. Pretty much all of my online video viewing is from these two services, so I'm fine with this limitation.
-
Any selected text will also be included in the draft as a blockquote. If no video is found on the current page, the bookmarklet functions just like Second Crack's included "Draft Link".
Download the source for the bookmarklet and install it the same way as Marco instructs. If you already have the other bookmarklets setup, just place add-video.php in the same directory and navigate to, e.g.:
http://admin.myblog.com/add-video.php
and install the bookmarklet from there.
Alternatively, I've added this to the existing "Draft Article" and "Draft Link" bookmarklet code. This conveniently keeps all the bookmarklets together and in one file. See the full source at my fork on GitHub.
I'm open to all ideas on improving the existing regex, expanding the functionality to other video services, or anything that will make this better. Get in touch.
-
These are mixes of patterns I threw together and ones found on the web. They've worked against everything I've tried—mobile and non-mobile sites, embedded and non-embedded videos—but there may be some edge cases I've missed. ↩
