With so many mobile devices taking the place of peoples computers and looking things up on the go mobile design is important. Many developers are now going responsive so that their websites give great user experiences on phones, tablets and computers. Since responsive design is relatively new there are many elements that aren’t as simple as a few additions to a stylesheet. One of the biggest frustrations for me was all of the YouTube and Vimeo videos that I had throughout my site. I couldn’t get old videos responsive without editing every one of them. My solution was developing WP Responsive Video to make any video old and new responsive.
Responsive themes have become all but standard lately and there are many frameworks to help make the process easier. This being said many of the frameworks available don’t seem to work on Youtube or Vimeo videos to resize them seamlessly for different screen sizes. This comes due to the fact that they are contained within iframes and given static dimensions. We sometimes try to script functions to resize any iframes within our site to change based on screen size, but without id’s or classes associated with our embeds it can prove difficult for larger already established websites.
What is WP Responsive Video:
A very small WordPress plugin that will make all YouTube and Vimeo videos responsive. In responsive I mean resize as window size changes. One very important thing to keep in mind is that the plugin with work for all previous embeds as well. You will not be required to go back and change code for every video embed throughout your website. This also means that you don’t have to change the way you do things as the plugin adds a function to complete the responsive features after your page loads as to not interfere with anything else.
WP Responsive Video Features:
- Currently resizes all YouTube and Vimeo videos based on screen size
- Small plugin with no Queries at all
- No setup required, just install the plugin and move on to something else
- loads a function that runs in the footer so no load speeds are effected
Questions about WP Responsive Video:
After installing my videos still aren’t responsive.
The function automatically resizes your videos to the size of its containing element. What this means is you will need to check your wrapper around the iframe to be sure that its not the reason the video is larger than the visible area.
I have to refresh when changing the screen size to get the Video’s to resize.
Some themes do not resize the parent element seamlessly meaning that resizing the window will not resize the container and thus the video within the container never shrinks. If your theme is already responsive and all that isn’t resizing is the video it should work immediately and simply.