A responsive element is one that adjusts fluidly to changes in the screen size. You can automatically make a media player adjust its size and layout to fit the dimensions of the device or container in which it is displayed. The viewers can get the optimized size for devices, such as desktops, tablets, and smartphones.
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 inline styles. In this article, we will show two ways to do that:
Option 1: Using CSS
Option 2: Adding inline styling to the embed code.
Before you begin
-
Portal: Set the embedded player size to be Resposive
1. Go to your Video details page for the video you want to embed
2. Press the Share button under the player
3. Click on the Embed code tab
4. Select Responsive in the drop-down list EMBEDDED PLAYER SIZE and use the updated code
-
Admin Portal: Set the embedded player size to be Resposive
1. Go to your Video details page for the video you want to embed.
2. Select the Embed tab.
3. Set the Responsive embedded player size and use the updated Embed code.
This sets the dimensions to 100% for height and width so that it adjusts its size to fully fit the container it's placed in. However, additional steps are needed to ensure true responsiveness.
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
- 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: Use the embedded code from the Portal or Admin Portal
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: 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 inline styling and then paste this into the HTML page.
Step 1: Add the style div before the embed code from the Portal or Admin Portal
<div style="position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;">
Step 2: Add the following attributes to the style inside the embed code:
position: absolute;top: 0;left: 0
Step 3: 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>
Important: 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.