Oct 12, 2012

Mobile-Friendly YouTube Videos via Shadowbox

Normally we embed YouTube videos into a website by just placing them into a div somewhere, but a recent project I was working on called for a YouTube video to be loaded in a lightbox. Our preferred choice for a lightbox plugin is Shadowbox due to the fact that it's easy to use but can also be used for complex situations. No problem, right? This is a pretty common request and a simple one to execute. However we wanted to make sure this video played and worked properly on desktop and mobile versions of a site. This is where the problem came up.

A long time ago (in a galaxy far, far away), Steve Jobs delved into why Apple the decision to not support Adobe Flash on the widely adopted iOS. Many people were upset with the decision, but Adobe had eventually folded and decided to stop supporting Flash on other mobile devices.

Now, back to the problem at hand. Traditionally, a YouTube video would be treated as a SWF object loaded into this lightbox. Obviously when I tested this on my iPad, the video wouldn't play because it was being treated as a Flash object. Instead, what we decided to do was to put the YouTube video inline with the page content and just hide it. When the video face is clicked, the video is shown by Shadowbox, rather than being loaded dynamically.

</div>

<p>Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec gravida, lorem in mattis imperdiet, justo erat luctus metus, eu congue est quam nec leo. Sed ultrices orci eget nisi sollicitudin vel convallis augue consectetur.</p>

</div>

</object>

</div>

Shadowbox.init({

skipSetup: true

});

$(function(){

$('#video-face a').on('click', function(){

Shadowbox.open({

content: this.href,

player: 'inline',

title: this.title || '',

width: 640,

height: 360

});

return false;

});

</script>

This way, the YouTube video isn't forced to be rendered as a SWF object or an HTML5 video object by shadowbox. By choosing to load the video inline, we basically let YouTube decide which version of the video to pick based on what browser the user is viewing the page on. Then we load the wrapper around the video instead.

Desktop Version:

iOS Version

Blog

Mobile-Friendly YouTube Videos via Shadowbox