Jump to content
Sign in to follow this  
newcoder1010

How to make responsive video iframe

Recommended Posts

Hello,

I would like to place the video 70% width of the screen and height should be adjusted by itself based on the screen size. 

HTML:

<div class="field field-name-field-youtube field-type-video-embed-field field-label-above">

<div class="field-label">Youtube 1: </div>

<div class="field-items">

<div class="field-item even">
<div class="embedded-video">
  <div class="player">
   <iframe class="utube" src="//www.youtube.com/embed/fPWzv" frameborder="0" allowfullscreen="" width="700" height="700"></iframe>  </div>
</div>
</div>

</div>

</div>

 

CSS:

 

iframe.utube {
    width: 100%;
}

Now it is taking entire computer screen. I changed from 100% to 70%. Desktop shows the entire video. But as I am making responsive, video is being responsive but cover page starts cropping. That means video shows 70% and cover page shows part of the cover page. How can I make it 70% width by a responsive height (please recommend) without cropping the cover page content?

Thanks.

Edited by newcoder1010

Share this post


Link to post
Share on other sites

I'm not sure what you mean by cover page, but there is a way to make the height scale proportionally to the width in an iframe.

Because it's an iframe, the aspect ratio of the video is not known. If you do know the aspect ratio beforehand, a technique to keep it responsive is to wrap it in a container and use a percentage padding. To calculating the necessary padding, take the aspect ratio of the video, which might be 16:9, then solve the equation 16/9 = 100/x  -> x = 100 * 9/16 = 56.25.

Now you can wrap the video in a container with the desired width and the percentage height:

<div class="video-wrapper" style="padding-bottom:56.25%">
  <iframe src="//www.youtube.com/embed/fPWzv" frameborder="0" allowfullscreen="" width="700" height="700"></iframe>
</div>
.video-wrapper {
  /* Choose your width, or don't specify it to take the full width of the parent container */
  width: 70%;

  /* The following rules are necessary */
  height: 0;
  position: relative;
  overflow: hidden;
}

/* Force the iframe to occupy all the space in the parent element */
.video-wrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

 

Share this post


Link to post
Share on other sites

1. 

.player {
    width: 70%;
    HEIGHT: 0;
    POSITION: ABSOLUTE;
    overflow: hidden;
    padding-bottom: 56.25%;
}

2

iframe {
    /* width: 70%; */
    /* height: 100%; */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border: 0;
}

3

html looks still same as before. 

4.

How page looks now.

https://drive.google.com/open?id=1O_9oIX2pzk872zkBczEbY4B1RqRTf3zX

Its overlapping on another field. If you visit the link, you will notice you tube field is overlapping body field. Also iframe not responsive. Cover page that I am referring to as "when you visit a page you see a video with video cover. cover may show one person and texts. As I am making responsive I want video and video cover to be responsive. Not just the video itself. That means I should see the video cover of person and texts regardless of the screen size. 

https://drive.google.com/open?id=1l6b1Dglkc5pDVZjOKRycO83OujYBCnqt

Thanks.

Share this post


Link to post
Share on other sites

Why did you give the player an absolute position? Give it a relative position. Absolute positioning breaks the page flow and makes layouts a nightmare to work with.

Share this post


Link to post
Share on other sites

This one worked for me. 

 

.player {
    position: relative;
    padding-bottom: 35%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.player iframe.utube {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

For mobile, I changed the padding bottom to 55% and for tablet to 45%.

Questions:

I did not understand the meaning of padding bottom and padding top. What is 16:9 ratio? How do you know the ratio? 16 and 9 are width and height?

Thank you.

Edited by newcoder1010

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×