Responsive Video Plugin for Wordpress.

For a new web site i am building which needed a few video files included, I initially tried using the video.js plugin which I have used on lots of projects. And with a little searching I even found a wordpress plugin for it. 

But the videos would drift off the page on smaller viewport sizes and mobile devices. I fought with it to be responsive, but didn't have any luck. Anyway, I realized that Wordpress version 3.6 and up are supposed to have built in support for responsive video short codes using mediaelement.js so I switched over to that instead. 

However, the jednotka holobest theme I am using breaks the responsiveness of both of these plugins. However, I found a simpler plugin for using YouTube which ended up working great. 

Thanks a million wptuts! 

http://wp.tutsplus.com/tutorials/plugins/creating-a-shortcode-for-responsive-video/

I have also used FitVids.js recently, but didn't realize there was a wordpress plugin for FitVids until I was writing this post and noticed the comments on the wptuts post.

This is even easier than the wptutsplus version.

1. Install FitVids for Wordpress Version 2.1
2. Activate it.
3. Under the Wordpress Appearance menu click the FitVids Options page.
4. Enter the jQuery selector that you will use for your videos. 
5. Create the html code for the page and embedded youtube / vimeo video. (see below)

<div class="FitVids" style="margin: auto; width: 80%;">
  <iframe width="420" height="315" src="//www.youtube.com/embed/O56p5nOYNHo" frameborder="0" allowfullscreen></iframe>
</div>

I grab the embed code from the share link on youtube.
Wow, that was easy.