Add a video background to your tumblr blog
I read about BigVideo.js through Hacker News and immediately wanted to use it with my videos on my personal tumblr. Here we go:
- Take a short (15s to 2m), landscape video on your phone that you’d like to use as the background for your website. (Portrait video requires cropping to work)
iMovie is good for compressing your videos down for web streaming. (If you don’t have iMovie, a Mac or an iPhone, skip this section and read the Vimeo instructions below)
- Plug in your iPhone and open iMovie.
- iMovie should ask you to import video from your iPhone.
- Click Share, then Export using Quicktime.
- Click the Export dropdown and select Movie to MPEG-4. Click Options.
- Select H.264, change Image Size to 768x576 SD, Optimize for Streaming
- You’ll need to play with the Data Rate to get the File Size below 5MB for Tumblr’s upload limit. You want a Data Rate above 1000 kbits/sec so clip your video if you must to get there.
- Select the Audio tab and choose None for Audio Format (unless you want to annoy your readers, or have ambient sound)
Free Vimeo alternative to iMovie:
- Download the Vimeo mobile app and upload the video to Vimeo in HD quality. (Vimeo’s compression is okay but may leave the video with artifacts)
- Head to the Vimeo website, login, find your video and download the SD quality version.
(If the encoded video is < 5MB, Tumblr will host the video file. If it’s > 5MB, you’ll need Vimeo Pro, S3 or alternative hosting.)
- You’ll need a tumblr theme that works well with a background video, I recommend Fluid by pixel union: http://www.tumblr.com/themes/by/pixelunion. It’s free.
- Head to this page and upload your video file, make sure you copy and save the URL underneath: http://www.tumblr.com/themes/upload_static_file
- On tumblr, click Customize and Edit the HTML in your tumblr theme.
- Search for jQuery to see where the theme author placed it.
- If there’s no jQuery script loaded, search for </head>.
This is where it gets a little tricky if you don’t understand javascript:
If you see a <script> line in your theme that links to the exact same filename as one of the lines below, you don’t need to add it to your theme. For Fluid, you don’t need jQuery and imageLoaded.
If you don’t see a <script> line in your theme that links to the exact same filename, add the line to your tumblr theme, underneath the other scripts:
<!—Begin BigVideo script —>
<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>
<link href=”http://static.tumblr.com/jf1132j/nIam964j3/bigvideo.css” rel=”stylesheet”>
<script src=”http://vjs.zencdn.net/c/video.js“></script>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script>
<script src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js“></script>
<script src=”http://static.tumblr.com/jf1132j/sfPm95z14/jquery.imagesloaded.min.js“></script>
<script src=”http://static.tumblr.com/jf1132j/o7sm95z7v/bigvideo.js“></script>
<script>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show(‘INSERT_LINK_TO_YOUR_VIDEO_HERE’,{ambient:true});
});
</script>
For the line that starts with BV.show, edit it to use the link to your video you copied from the Tumblr upload page.
Here’s a gist link for this code if you know what you’re doing: https://gist.github.com/3441168
VOILA! When you hit Preview and Save, your theme with your video should show up. It might require a bit of fidgeting to make it worth with your theme. For example, I had to disable Infinite Scroll and add
container-top {position:relative;}
to the Custom CSS section of the Fluid theme to make the top of the menus reappear.
Enjoy. Hit me up in the comments if you have questions or run into issues. If you want to steal my terrible fireworks background video, here’s the link: http://static.tumblr.com/jf1132j/oWRm97w6e/fireworks.mp4
Note: I think I’m abiding by Tumblr’s file hosting policy. If sharing links to hosted scripts or theme assets with other tumblr users is NOT OKAY, please let me know and I’ll immediately remove these links.
