Responsive Video Players: The What and the Why
Responsive Video Players: The What and the Why
At iPlayerHD, we are often asked about responsive video players. More specifically, a user embeds our iframe code into their web page and when they view their video on a small screen device (handheld typically), they find that they can only see part of their video. Naturally, they are concerned and want to know how to fix the problem. Our support staff will then help the user by first talking about responsive web pages and how to make those pages recognize and respond to our player. So too, here in this post, I’ll begin with an explanation of the term responsive as it applies to web pages and to various elements contained in those pages.
Simply put, responsive web design makes a web page look good on all devices. The page resizes based on the screen size so that the elements of the page – menu items, images and videos fit within the screen. A well designed responsive page is completely visible on all devices and no part of the part is outside the screen’s margins.
You can test your own page or any web page on your desktop simply by reducing the size of the page using the maximize/restore down icon at the top right of the browser page. Grab the side of the page and drag it smaller and smaller and observe the page elements as you reduce the size. If it is properly responsive, you’ll notice the elements of the page responding and staying within the margins of the page. Reduce it enough and you’ve reached the size of a handheld. If there is a video player on the page, it should resize also. If it does not resize, then the page needs some changes to the page code so that the player responds.
Most do it yourself web site builders do the work for you and so there is no need to adjust the code to create a responsive page. In the case of WordPress, while the page is responsive, embedding video players are not necessarily responsive. Well, YouTube and Vimeo are treated differently and so they need no additional coding to be responsive. That’s a case of big loves big. But for mere mortals like iPlayerHD and most other video hosting platforms, a plugin is needed to allow the player to respond. iPlayerHD has a plugin in WordPress that works well for anyone embedding any iframe into a WordPress site. This iPlayerHD blog post explains it quite nicely.
In other platforms like SquareSpace, Joomla, etc, apps or plugins are provided by the site that are specifically designed for iframe code. The app or plugin (SquareSpace has something they call video blocks) will make responsive all of the elements contained within the iframe, including the video player.
Oh, by the way, an iframe is simply a web page within a web page.
There are a large number of other platforms for building websites that do not include tools that cause iframes to be responsive. In these cases, designers need to add code to the site to add the responsive behavior to video players. If you need help with this, you’ll find instructions below that will get you the responsive site you require.
Reach out to support@iplayerhd.com if you need additional assistance….
Responsive Video Players: The How
Begin by wrapping the iframe code we generate:
<iframe src=”//iplayerhd.com/player/video/d9fefac5-3cb8-45a3-9ee0-bd707b4e2e4c?cbartype=auto” allowtransparency=”true” frameborder=”0″ scrolling=”no” allowfullscreen=”” mozallowfullscreen=”” webkitallowfullscreen=”” oallowfullscreen=”” msallowfullscreen=””></iframe>
into a div:
<div><iframe src=”//iplayerhd.com/player/video/d9fefac5-3cb8-45a3-9ee0-bd707b4e2e4c?cbartype=auto” allowtransparency=”true” frameborder=”0″ scrolling=”no” allowfullscreen=”” mozallowfullscreen=”” webkitallowfullscreen=”” oallowfullscreen=”” msallowfullscreen=””></iframe></div>
Now there are two things you can do:
1) add these styles to the webpage:
.videoWrapper {
position: relative;
padding-bottom: 56.25% !important; /* 16:9 */
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
and add the videoWrapper class to the div which wraps the iframe:
<div class=”videoWrapper”><iframe src=”//iplayerhd.com/player/video/d9fefac5-3cb8-45a3-9ee0-bd707b4e2e4c?cbartype=auto” allowtransparency=”true” frameborder=”0″ scrolling=”no” allowfullscreen=”” mozallowfullscreen=”” webkitallowfullscreen=”” oallowfullscreen=”” msallowfullscreen=””></iframe></div>
or 2)
Just add the styles inline like this:
<div style=”position:relative;padding-bottom:56.25% !important;height:0;”><iframe style=”position:absolute;top:0;left:0;border:0;width:100%;height:100%” src=”//iplayerhd.com/player/video/d9fefac5-3cb8-45a3-9ee0-bd707b4e2e4c?cbartype=auto” allowtransparency=”true” frameborder=”0″ scrolling=”no” allowfullscreen=”” mozallowfullscreen=”” webkitallowfullscreen=”” oallowfullscreen=”” msallowfullscreen=””></iframe></div>
The thing which gives the iframe its ratio is the 56.25%. The number is derived by dividing 9/16 = 0.5625 = 56.25%. The 9/16 is there because the default setting is a 16:9 video. If the video is in a different format, the percentage must be changed like this: 3/4 = 0.75 = 75%. Same thing goes for other ratios.