Join Morten Rand-Hendriksen for an in-depth discussion in this video Making videos responsive by including FitVids, part of WordPress: Building Responsive Themes.
- View Offline
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--…
- 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