A responsive element is one that adjusts fluidly to changes in the screen size. The growth of mobile and tablet viewing has driven the need for such elements. If you are adding videos to responsive websites, then the video player will need to be responsive as well. You can do this by adding a responsive embed code to the page rather than the standard embed code. You will also need to add a way for the page to adjust the iframe that contains the player and that can be done with CSS or javascript. In this article we will show two ways to do that. The first way is by using CSS and the second way is by adding styling to the embed code (shown after the CSS steps).

Option 1 – Using CSS to style the responsive video player

Step 1 โ€“ Edit the CSS for the page

Youโ€™ll need to add the following entries to the main style sheet controlling the page:

.video-container {
	position:relative;
	padding-bottom:52.5%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

The first CSS declaration targets the video container and the second addresses the contents of the container, in this case the iframe. You can also apply this to objects and embed elements. Now your pages are ready for responsive embedded videos.

Step 2 โ€“ Copy the responsive embed code from the portal

If you go to the video details page for the video you want to embed, you can find the embed code under the Share tab. Click on the Embed code tab and then in the drop down list that controls the dimensions of the embed code, select Responsive.

You can also copy the responsive embed code from the video details page for the video in the admin portal. Just click on the Embed code tab, select Responsive from the list of Embed sizes and copy the embed code.

Step 3 โ€“ Wrap the iframe when adding it to the page

Create a container div around the iframe and give it a class:

<div class="video-container"><iframe.......></iframe></div>

And now save the page. The video player will now resize with the page so that it displays properly on mobile devices and tablets.

For a detailed discussion of intrinsic ratios and how to determine them so that your video does not show sidebars, see this blog post from Thierry Koblentz https://alistapart.com/article/creating-intrinsic-ratios-for-video.

Option 2 โ€“ Add styling to the embed code (no CSS changes)

If you donโ€™t want to make changes to the CSS file, you can wrap the embed code with styling and then paste this in the HTML page.

Add the style div before the embed code: 

<div style="position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;">

Add the following attributes to the style inside the embed code:

position: absolute;top: 0;left: 0

Close the div with 

</div>

This is an example of the code you would add to the page. 

<div style="position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;"> 

<iframe src="https://wedemo.ravnur.com/embed/media/432?autostart=0" scrolling="no" style="width:100%;height:100%;position: absolute;top: 0;left: 0;" allowfullscreen="true" frameborder="0" seamless=""></iframe>
 
</div>

Remember, the responsive embed will be responsive only to the extent that the parent container is responsive. If you put the responsive embed inside a fixed container, it canโ€™t respond beyond what the container does.

Was this article helpful to you?

Ravnur

Posts

Leave a Reply