Responsive youtube video

Question

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

I have a gist which shows how to render a completely responsive youtube iframe which takes into account resizing the browser width as well as the height. You may find it useful: https://gist.github.com/dcondrey/647fcdda17cd23715872 — davidcondrey, Aug 08 '14 at 04:22
possible duplicate of [Shrink a Youtube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) — davidcondrey, Oct 04 '14 at 23:52

Milche Patern · Accepted Answer · 2013-11-04T13:56:27.103

3

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

edited Nov 04 '13 at 13:56

answered Nov 04 '13 at 13:47

Milche Patern

19,632
6
35
52

Milche, do you see black bars left and right? Try to play, pls. – qadenza Nov 04 '13 at 13:50
No, i don't see what you mean. You see them on screenshot ? – Milche Patern Nov 04 '13 at 13:58

score 2 · Answer 2 · answered Nov 04 '13 at 13:42

2

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

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

answered Nov 04 '13 at 13:42

Charles Ingalls

4,521
5
25
33

Works fine for me. What browser are you using? – Charles Ingalls Nov 04 '13 at 13:53

score 1 · Answer 3 · answered Nov 04 '13 at 13:45

1

This worked for me:

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

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

answered Nov 04 '13 at 13:45

SKeurentjes

1,848
12
18

SKeurentjes, your video is 16:9 tru to play and you will see black bars left and right. – qadenza Nov 04 '13 at 13:48

Responsive youtube video

3 Answers3