Jump to content

How to make responsive video iframe


newcoder1010
 Share

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
Link to comment
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;
}

 

Link to comment
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.

Link to comment
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
Link to comment
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
 Share

×
×
  • Create New...