New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

WordPress: Building Responsive Themes
Illustration by

Making videos responsive by including FitVids


From:

WordPress: Building Responsive Themes

with Morten Rand-Hendriksen

Video: Making videos responsive by including FitVids

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.
Expand all | Collapse all
  1. 4m 5s
    1. Welcome
      1m 4s
    2. Using the exercise files
      1m 27s
    3. What you should know before watching this course
      1m 34s
  2. 8m 36s
    1. What is responsive design?
      4m 16s
    2. The different faces of WordPress on mobile
      1m 55s
    3. Exploring the finished Anaximander theme
      2m 25s
  3. 9m 38s
    1. Getting and installing the Anaximander theme
      1m 53s
    2. Configuring basic theme options
      7m 45s
  4. 23m 51s
    1. Deciding what screen sizes to design for
      4m 11s
    2. Thinking responsively: Designing for many different screen sizes
      6m 23s
    3. Visualizing content realignment for better markup
      4m 35s
    4. Designing menus
      4m 52s
    5. Adding responsive images and videos
      3m 50s
  5. 26m 8s
    1. What are media queries and how do they work?
      4m 18s
    2. Exploring CSS3, progressive enhancement, and graceful degradation
      3m 27s
    3. Understanding best practices for media queries
      3m 57s
    4. Creating a responsive frame
      5m 12s
    5. Customizing media queries with the Chrome Developer Tools
      5m 28s
    6. Taking device width into account
      3m 46s
  6. 11m 1s
    1. Resizing the site title and the description
      8m 22s
    2. Adding media queries to the header
      2m 39s
  7. 11m 22s
    1. Making the menu responsive
      3m 35s
    2. Creating a different menu design for small screens
      7m 47s
  8. 19m 22s
    1. Making a responsive single-post layout
      6m 11s
    2. Making images responsive
      4m 37s
    3. Making videos responsive by including FitVids
      8m 34s
  9. 7m 45s
    1. Making the sidebar responsive
      5m 10s
    2. Hiding sidebars on mobile
      2m 35s
  10. 7m 28s
    1. Dealing with footer widgets
      5m 11s
    2. Adding navigation links that return to the top of the page
      2m 17s
  11. 12m 54s
    1. Using FlexSlider to create a responsive slider
      6m 2s
    2. Creating a loop to show sticky posts in a featured slider
      6m 52s
  12. 24m 37s
    1. What is jQuery Masonry?
      3m 41s
    2. Installing jQuery Masonry
      4m 45s
    3. Configuring the index page with Masonry
      7m 0s
    4. Using CSS to finalize the Masonry layout
      6m 17s
    5. Adding media queries to the Masonry index
      2m 54s
  13. 9m 11s
    1. Exploring hidden features of the Anaximander theme
      5m 51s
    2. Where to go from here
      3m 20s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
WordPress: Building Responsive Themes
2h 55m Intermediate Aug 17, 2012

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.

Topics include:
  • What is responsive design?
  • Installing the Anaximander example theme
  • Deciding what screen sizes to target
  • Designing menus
  • Adding responsive images and video
  • Using CSS media queries to apply different styles
  • Handling sidebars on mobile displays
  • Dealing with footer widgets
  • Installing jQuery Masonry
Subjects:
Web CMS User Experience Blogs Responsive Design
Software:
WordPress
Author:
Morten Rand-Hendriksen

Making videos responsive by including FitVids

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.

The problem of videos not being responsive is not new, and fortunately, someone has already solved that for us. But to make that solution work, we have to include a JavaScript library specifically for that purpose. That JavaScript library is called FitVids, and you can find it under fitvids.js.com. To include FitVids into WordPress refers me to download the FitVids library, so I'll jump to GitHub. I'll find the file I want, this jquery.fitvids.js file.

I'll open it and click on the Raw, so that we see just the file itself. And then, in my browser, I'll right-click on the page, go Save as, and then save the file in my theme. So I go to wp-content/themes/ Anaximander, and I find my js folder and I save it here. Now that we've saved the file inside our theme, we need to create a function that will call up the JavaScript library whenever the theme is used. That function will live in the functions.php file, inside our theme.

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.

This is the only way FitVids can know which content is a video and where it should be applied. So here we have a simple JavaScript function that does just that. Then we create a function around that function that is called, so that we can actually inject this function into our theme. We call that function add_fitthem, and then up here we've create another action that's calling add_fitthem, so this function, in the head of the page. To see all this in action, save the functions.php file and reload your page.

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed WordPress: Building Responsive Themes.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.