CODEWITHSUNDEEP
cssiframeresponsive-design
qadenza
qadenza

Reputation: 9293

Responsive youtube video

On many places I found this code to make a video responsible, but it doesn't work for me.

<div id='wrapp'>
<iframe id='player' src="//www.youtube.com/embed/VWSL2SykovA?rel=0"></iframe>
</div>

css

#wrapp {
    position: relative;
    padding-bottom:75%;  // video is 4:3 aspect ratio
    padding-top: 25px;
    height: 0;
    width:70%;
    margin:15px auto;
    z-index:2;
    border:medium ridge #b30000;
    border-radius:9px;
}
#player{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

video, i.e. iframe is too tall.
Here is the FIDDLE

Upvotes: 1

Views: 1450

Answers (3)

Milche Patern
Milche Patern

Reputation: 20442

Your proportions seems to be faultives.

Try that css settings proposed by Zurb Foundation

#wrapp {
  height: 0;
  margin-bottom: 16px;
  margin-left: 30px;
  overflow: hidden;
  padding-bottom: 67.5%;
  padding-top: 25px;
  position: relative;
}

#player {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

jsFiddled here

Here's a screen capture of nhZBV/4

screen capture of nhZBV/4

Upvotes: 3

SKeurentjes
SKeurentjes

Reputation: 1878

This worked for me:

#wrapp {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

Example: http://jsfiddle.net/nhZBV/3/

Upvotes: 1

Charles Ingalls
Charles Ingalls

Reputation: 4561

If you apply box-sizing: border-box; it works fine!

Check out updated fiddle: http://jsfiddle.net/nhZBV/2/

Upvotes: 2

Related Questions