The default WordPress theme at the time of this screencast is TwentyEleven, a wonderfully simple and responsive design. That is, until we post an awesome YouTube video as a new blog post and the responsiveness breaks down. The video doesn’t fill the area on wide screens and is too big on narrow screens, breaking outside the content area.
In this video we’ll cover how to add jQuery to a WordPress theme, then download the jQuery plugin FitVids.js and integrate it into the theme (simple stuff!). The result is the video instantly fits the responsive nature of the theme. It works for video from any source.
Even though this is a simple and specific example, I hope it helps you understand how you can get started integrating any cool JavaScript thingy you find on the web into a WordPress site.
Links from the video:
First line: “I have prepared for this zero” – love it Chris
Awesome video as usual, Chris!
One thing I’d point out to people: If you’re going to do this with the 2011 theme, make sure to copy/duplicate the theme first. Otherwise, if you update the theme later on, all of your changes will be lost.
Also, you can change that functions.php jQuery loader script to load jQuery in the footer by changing the last parameter to “true”, which tells the enqueue_script to load in the footer at wp_footer();
Awesome this came just in time! I am going to merge this into this Bones theme I found and give it a test run. Thank you Jacob for letting me know how to get this loaded in the footer!
Thanks for the screencast Chris. Here’s the code from the function.php file we used in a recent project. It’s basically doing the same thing you mentioned in the video but we are actually registering the script with WP for later use with the wp_enqueue_script function.
Also, if you don’t specify the last number of the jQuery version it will automatically pull the latest point version number for the mentioned version.
And as some already mentioned before, there’s the last variable in both the register and enqueue script function that will load the script in the footer.
Thought the extra jQuery file was an interesting idea...something I certainly will look into doing more.
You are my hero dude. Keep up the great work!
I don’t even use wordpress. I just watch this for the entertainment and pure brilliance. :) moar videoz!
Thank you so much, this is such a valuable tool, your video is also wonderful and entertaining! keep it up, I hope you enjoy much succes with any thing you do! keep rockin :D
Chris,
Thank you for your interesting tip & tutorial.
Could this be combined with the Screencast.com wordpress plugin?
https://wordpress.org/extend/plugins/screencastcom-video-embedder/
Is there an improvement opportunity by combining both plugins into one new plugin? Does this give you any new ideas to test? If so, please post a new screencast on this topic.
Thanks again!
LOL! Great video and made me style. You are talented to get this stuff, figure it out and pass it on to other people.
I am ASP/ASP.NET developer for YEARS and absolutely love WordPress and JQuery. Just getting into WP Plugin Integration.
This video was helpful in knowing what to tweak and where to put files and get proper path references. You just made me a few hundred bucks this year.
Thank you!
*style = smile with your style.
Works Great! Thank you.
First time i have seen that WTFPL license.
Is this now included in WP3.3? It appears to already resize in 3.3. Maybe I’m doing something wrong or just got lucky.
I just upgraded and tested default theme and FitVids is still needed.
Thanks for the video. I’ve got fitvids.js installed and all scripts are loading as they should. The thing I’m trying to do differently is rather than put my Vimeo embed code into a post or a page, I’m hard coding it into index.php into a div where I want my video to live.
Does anyone know how to accomplish this? What will I need to do differently? (Unfortunately I can’t provide an example link as the site has yet to launch.)
Here’s what I’ve got so far:
And in index.php:
And for the CSS:
Thanks!!!
Well, despite having errors in my code above (iframe id=”video” amongst others I’m sure), the main problem is seems to be that fitvids.js was corrupt. I tested this by re-downloading the package on github, and then plugging in my remote jquery.fitvids.js path into the local tests.html file, and it stopped working. Dropped in a fresh fitvids.js copy remotely, and boom!
There’s a Plugin for that! You don’t want to touch your theme files? Go and get Kevin Dees’ Plugin in the Extend at http://wordpress.org/extend/plugins/fitvids-for-wordpress/
I used the Plugin (the easy way) … the big problem is there’s a bunch of space above the video. I put it above the text and under the text, didn’t matter. I even took the video code out of the column classes. Just pasted the link from YouTube.
Here’s the page: http://michaelprovenza.com/index.php/about-provenza/
I really want this to work. The video is the only thing that’s not responsive on the entire website. Also, in the set up, I put .page as the jQuery selector instead of .post. Not sure if that matters, but the video is on a page – not a post.
I hope someone can help!!!
Shelley
Hey Chris, how could you make a flash 360 panoramic file dynamic? And also an html5 panoramic?
Would you also use the fitvid script?
Love the FitVid.js But one fault I find is that if you adjust the browser, while the video is playing it causes it to start over (reload).
I often have my Browser in Maximized view, and will occational “UnMaximize” it when needed. Which will cause the video to stop and start from the beginning. This is extremely annoying if say I want to Shrink the size of Firefox, then have SublimeText open to the left so that I can follow along with the Videos here at CSS-Tricks.
Chris, I used the FitVids plugin for my wordpress site and there’s a ton of padding-top above my video now. My page source says the plugin is adding: padding-top: 53.95833333333333%;
How do I fix this?? I’m a beginner developer, so this might seem simple, but I just officially became lost on this one!
Here’s my page: http://michaelprovenza.com/index.php/about-provenza/
You’ll need to scroll way down to see the video. I tried putting the video above the text, under the text, I even took it out of the column classes and any div tags. The video is posted on a page (not a post) so I also don’t know what to put for the jQuery selector. The screen shot shows to use .post, but that doesn’t make the video responsive. When I use .page, the video is responsive but then there’s all the crazy padding on top.
Thanks for any help!!
Shelley
Okay, I think I just shocked myself and figured it out! After reading more information on Kevin Dees page, I found the problem was the selector. After viewing my page source, it appears the tag containing my video is called .entry-content (not .post or .page). So, it looks as though it now works and does not have crazy padding added to the top!!!
http://michaelprovenza.com/index.php/about-provenza/
Shelley
Awesome Chris. I’m in the process of redesigning my site to be responsive and have struggling with this issue a bit. Happy I found this screencast (I actually came here looking for something else…. :) ) Looks like this should do the trick. Thanks!
This is great stuff. I will definitely be implementing it. I was also wondering if this script also works for the jquery slider plugins.
i love your worck man.Ten plus :X
You left in the width and height attributes on the embedded video. I’ve noticed that removing them or changing the dimensions has no effect once fitivids is working.
Is there any reason to leave in the width and height? Should they be set to a certain size as a backup?
FitVids strips them out. I figure you should just leave the defaults in there because they probably come with correct aspect ratio to begin with. Actually, definitely leave them in there because FitVids uses them to determine the aspect ratio to begin with.
Excellent script. I got it working in Chrome and IE but not in Firefox.
In FF it stops letting me re-size the page completely, any ideas? Thanks
hello,
I don’t know if this is the right place for this question, but here goes.
I am using the twenty eleven theme and I am replacing the header images with a flash slider. I followed your tutorial I the slider will adjust, but it is not consistent with the area. meaning that if I change the browser sizer the slider updates like it should. But unlike in your screen cast where the youtube video stayed inside the area of the “entry-content”, my video is too big and as a result gets cropped. do you know which id or class should be targeted for the header? or does the system not work for sliders?
thanks for any help,
– Jon
Hi Chris, great video!
I just had an issue with getting this to work and after some head-scratching, it looks like if you select ‘Enable privacy-enhanced mode’ on YouTube, the URL becomes http://www.youtube-nocookie.com
Meaning fitVids won’t apply itself to the video. If anyone else has this issue, you can add an additional selector to the code, found at like 47.
Awesome thing and it worked. But if I’m posting a video of vimeo and YouTube on my Blogpage, it wouldn’t scale the YouTube ones. I don’t know, if this is a known problem or just me who did something wrong.
Finally! I tried multiple WordPress plugins (including the fitvids.js plugin) and none of them worked. Then I followed this video and biggidy-bam! Now I don’t have to go through all of my videos and put wrapper div’s around them. Thanks, Chris.
Awesome form Chris! It’s a shame theresn’t an easy way to wrap after the join – Hopefully someone will come along and find a way to put drag handles so that they can be put anywhere (eg sidebar) at will – maybe then would even would be able to subsist with just a call to fitvids.js.
Youtube ====> width=”100%”
You Rock!!! I was trying to fix my website after a new theme install,where i had to edit every post one by one..talking about a video website..with 1500 posts :) After i realized that the videos are not responsive :(
You made my day after fighting with a website for 1 day…with your spoonfed method is just perfect!!!!!!!!!!!!!!!
THANK YOU!!!!
Man! Entertaining and working perfectly … even in my mess of wp-code. Thank you, Chris Coyier :-)