CODEWITHSUNDEEP
htmlcssvideoyoutube
Midnitezorro
Midnitezorro

Reputation: 31

embed youtube video responsive solution

can anyone help me please:

I was attempting to make an embed youtube video 100% width and responsive, I found this code on this website to try to accomplish this:

http://avexdesigns.com/responsive-youtube-embed/

css:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    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%;
}

Html:

<div class="video-container">
     <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

With the code as is: the video didn't even appear: So I took the overflow hidden off the code and change "padding-top" to just "top": to push the video down: the video is on top of my page and it should be below where it say "Why kevin Kurbs Interior design/watch the video below?"

To partially get the video how I want it to appear I remove from my html and adjusting the iframe accordingly: 

iframe { 
    width: 100%;
    top: 5px;  
    margin-bottom: -5px
}

The video code is from 288-304

http://graph-art.matc.edu/harrisd5/vicom126/a2/index.html

By doing this just made the youtube thumbnail cover photo responsive when the video is played it's the center. So how I go about making this video 100% width and responsive while maintaining its aspect ratio placing into below the "Why Kevin Kurbs Interior bar?" ?

Upvotes: 1

Views: 4469

Answers (4)

JulienRioux
JulienRioux

Reputation: 3092

Here is the solution I found:

HTML:

<div class='embed-container'>
    <iframe src='https://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe>
</div>

CSS:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Upvotes: 4

Faruque Ahamed Mollick
Faruque Ahamed Mollick

Reputation: 792

Here is the CSS code:

.yt-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}
.yt-container iframe, .yt-container object, .yt-container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

And below is the HTML code:

<div class="yt-container">
   <iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe>
</div>

Source: Make YouTube Embed Video Responsive Using CSS

Upvotes: 0

Oli B
Oli B

Reputation: 228

When I've done responsive videos before, I've used this bit of jQuery. When the screen is resized, it calculates what the height should be.

<script>    
var $allVideos = $("iframe[src^='https://player.vimeo.com'], iframe[src^='http://player.vimeo.com'], iframe[src^='https://www.youtube.com'], iframe[src^='http://www.youtube.com'], object, embed"),


    $allVideos.each(function() {

      $(this)
        // jQuery .data does not work on object/embed elements
        .attr('data-aspectRatio', this.height / this.width)
        .removeAttr('height')
        .removeAttr('width');

    });

    $(window).resize(function() {



      $allVideos.each(function() {

        $fluidEl = $(this).parent();
        var newWidth = $fluidEl.width();

        var $el = $(this);
        $el
            .width(newWidth)
            .height(newWidth * $el.attr('data-aspectRatio'));

      });

    }).resize();
</script>

Upvotes: 1

Mate Zabo
Mate Zabo

Reputation: 1646

In this case you could use calculated height for your iframe. It is calculating from the page width and the default aspect ratio of the youtube video iframe.

iframe {
    width: 100%;
    top: 5px;
    margin-bottom: -5px;
    height: calc(100vw*(315/560));
}

Upvotes: 1

Related Questions