CODEWITHSUNDEEP
javascriptjqueryhtmlcssyoutube
Velibor Nikolic
Velibor Nikolic

Reputation: 47

Changing Aspect Ration of Embedded Youtube Video

<!DOCTYPE HTML>
<head>
<style>

    body {
        overflow: hidden;
        margin:0;
    }    
</style>

</head>
<body>


    <iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&showinfo=0" frameborder="0" allowfullscreen></iframe>


<script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>    

<script>

    $(function(){
      $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

      $(window).resize(function(){
        $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
      });
    });

</script>
</body>

As I resize is there a way to make the iframe shrink with the video? Currently when it resizes there is a huge big black gap and the video sits in the middle.

Upvotes: 0

Views: 51

Answers (2)

partypete25
partypete25

Reputation: 4413

No need for javascript here. You can do this with pure css.

This is how bootstrap does it:

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

http://codepen.io/partypete25/pen/XdPGmb?editors=1100#

For 16by9 videos use:

.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

For 4by3 videos use:

.embed-responsive-4by3 {
  padding-bottom: 75%;
}

Upvotes: 0

Dong Hoon Kim
Dong Hoon Kim

Reputation: 84

Please view the sites below. I think it has your answer with needing a responsive embedded video.

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

https://coolestguidesontheplanet.com/videodrome/youtube/

Hope it helps.

It might be easier doing it the CSS way instead of using javascript.

Upvotes: 1

Related Questions