Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
The many ways visitors access web sites, via mobile devices, tablets, and desktops, now requires sites to incorporate responsive design elements that adapt to different screen sizes and browsers. In this course, Morten Rand-Hendriksen demonstrates design strategies, best practices, and actual code examples for creating a responsive web site. The course covers layout, navigation, responsive video embedding, and content sliders. The final chapter shows how to create an index page with jQuery Masonry, a jQuery plugin that helps you create dynamic grid layouts.
Now that we've made the layout, and also the images, responsive, it's time to take a closer look at how to make responsive videos. Unlike images, you can't simply use CSS to make videos responsive, at least not the videos that you bring in from other sources, like YouTube and Vimeo and other video sources. If you look at the video we inserted here-- this is a simple YouTube video--you'll see that it looks fine in the full layout, but if I reduce the screen size, you'll see that the video is not responsive at all, which produces a very bad user experience.
Just imagine visiting this on your cell phone. You can't even see the play button. But before we start talking about how to make the video responsive, let me just show you the easy way of adding videos to WordPress. If I have this video, Farm to Table, that's on Vimeo, or I have YouTube, all I have to do is create a new pst, give it a title, write some text, and then, making sure I'm in HTML mode, I'll all go to the video, copy out the URL--and you can do this in YouTube too-- paste in the URL, give it a category--I'll set this under Student Work--and publish the story.
What happens now is when we view the post, WordPress cuts a hole in our page, called an iFrame, and then goes to Vimeo and grabs the necessary content and then embeds it automatically. So, whereas in the past, we have to go and grab all the embed code and paste it in and work with it, now we can simply get for WordPress to do this automatically. However, just like with YouTube, this video, not responsive.
So I'll open the functions.php file and I'll scroll all the way to the bottom, because that's where to want to add it. And then I'm going to add the new function here. Because this is fairly complex, I've a created a code snippet for you that you can copy and paste in, so we'll do that and then I'll explain what happens afterwards. First, copy from this top line here, down past add_action('init','anaximander_fitvids'). I'll copy that piece and paste it in. If we look at this function, it's not as complicated as it looks.
First, we're creating a function with the name anaximander_fitvids, and then down here, we're telling WordPress, add the anaximander_fitvids function on initiation. Inside the function, we have a conditional call here that says, this only happens if the current page is not an admin page, because we don't want to call fitvids when we're in the Admin panel. That's just a waste of resources. Then we get to the actual function. It consists of three elements. First, we register the script itself.
We register it by giving it a name. So I called it fidvids; you can call it whenever you want. Then we tell WordPress where the script is. It's in the current template directory, and then it's under the folder js, and the file is call jquery.fitvids.js. We're also telling WordPress that this file is related to the jQuery library that WordPress ships with, so that now WordPress knows I'm calling this file and I also have to kick in jQuery itself.
Once we've registered a script, we have to enqueue the script. Enqueing the script means we're telling WordPress, I want to actually see the script in my page. So here you see we say, wp_enqueue_script, and then we call the name we just gave the script up here. If we took out the rest of this function right now and ran the script, you'd see that WordPress would call up jQuery and the FitVids library in the header of our page, but nothing would happen. We need to do two more things for this to work. First, we need to add a script that assigns the FitVids function to a specific class inside our document.
If you're in Chrome, you can now hit Ctrl+U to see the code behind the page, and from here you can go Ctrl+F and search for FitVids and you'll see that we've two calls here. First, we have the actual library itself, this call right here. You see jquery.fidvids.js is being called. And then in addition, you'll see up here, we have that script that appends FitVids to the video class. However, if we resize this window, you will see that the video is still not responsive.
But if you were paying close attention, you will know why. Remember how I said we're appending FidVids library to the video class? Well, right now that videos doesn't yet have a video class attached to it. To make that happen, we have to go and edit the post and wrap the string in a div with a class video. I'll update the page, view the post again, and if everything worked right, we should now have a responsive video. Look at that. Cool, eh? But I'm going to give you one more piece of code that will make this process even easier.
As you saw, WordPress doesn't automatically append a video class to wrap around videos, so you have to do that manually. So what I've done is I've created a function that does just that for you, so you don't have to do it every time you add a video. If you copy this function here that's directly under the other function and paste it in directly under the other function, what this function does, as it says, if there is a video that's been inserted using that old embed method, I want you to wrap that video in a div that has the class video automatically.
If we save this and go back to a post that already has a video--so I'll go back to Posts and find a post that has a video--and I simply update that post, because we have to now tell WordPress to reinitialize that video so that the new wrapper is wrapped around the video, and we go view this post, you'll see that this posts now also has a responsive video in it.
Now that we've added FitVids into our theme and we've added that function that automatically wraps new videos in the div that has the class video, you'll have responsive videos throughout your site. Just keep in mind that this only applies to new videos you've added. If you've old videos on your site, you need to go back in to the Admin panel and just resave those posts that have oembed videos in them, so that WordPress wraps them in that necessary div or the class video.
There are currently no FAQs about WordPress: Building Responsive Themes.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.