University Marketing & Communications

November 25, 2013

YouTube playlist update

By Jon Swanson

If you’ve embedded a YouTube playlist into your WordPress site, you might have noticed it looks different. Fear not, you aren’t seeing things! We recently modernized the look and feel of the YouTube player on our Marketing-hosted WordPress sites. (We’ll be rolling out the update to GitHub soon.)

The player is now 16:9, taking advantage of the native aspect ratio of most modern content on YouTube. The whole widget is fully responsive–resizing on the fly to any container width or browser size. The video list has moved to a more aesthetically pleasing location beneath the player and nice visual and functional flourishes have been added. My favorite updates include automatically scrolling to the video cued and translucent on-hover video descriptions. But the most important changes to the player lay under the hood.

The underlying technology for the player has been completely revamped. The old player used Flash (a SWFObject), which a useful and powerful technology only for the dwindling number of platforms that support it. Unfortunately, iOS users or Android users on anything newer than 4.0 Ice Cream Sandwich weren’t able to see the videos. With the growing number of mobile device views on network sites, we decided that hiding the player when an unsupported Flash-less browser visited the page wasn’t going to cut it anymore. So we rebuilt the whole YouTube playlist widget and shortcode to use YouTube’s iFrame API. This allows us to show Flash videos to users whose browsers still support it and HTML5 videos to our mobile users. We also made some updates to the scrollbars on the player so it is completely functional on modern mobile devices.

The best news? Using the new YouTube playlist on your site is the same as before. Either drop the entire playlist URL into your page/post or use the YouTube shortcode. (See embed YouTube videos tutorial).


Example brought to you by Dubs

Shortcode:

[youtube id=PLgNkGpnjFWo_jQDJmJKShKC1YuRAB3Ppm]

Result:

required attribute "type" missing

 
Enjoy.