Join Morten Rand-Hendriksen for an in-depth discussion in this video Adding responsive images and videos, part of WordPress: Building Responsive Themes.
- View Offline
It's relatively easy to create responsive text elements on a web page.…Text, after all, is designed to reorganize and flow depending on the size of the…box that contains it.…Images and video are different matter entirely.…Images by their very nature have a fixed height and width, and we have to deal…with that in a nondestructive and functional manner.…And when it comes to videos, it's a total gong show because there's so many…standards out there and more often than not, we are pulling the videos from…external sources like YouTube and Vimeo, and those sources put restrictions on us.…
But fret not, my friend. All can be solved with code.…We just have to decide what the end result should look like first.…Let's take a look at the images on this page.…Before we dive into the code itself, I just want to give you an idea of what…we're talking about when we are talking about responsive images and responsive video.…If you look at this page, we have fixed widths for these images.…If I change the size of my window, you will see that the image stays the same…
- 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