CODEWITHSUNDEEP
javascripthtmlcssiframeyoutube
user818700
user818700

Reputation:

Make YouTube embedded iframe video fit perfectly in div without black bars?

If I have the following markup:

<div class="video-wrapper">
  <iframe src="link/to/video" frameborder="0"></iframe>
</div>

and styling:

.video-wrapper {
  height: 100vh;
  width: 100vw;
}

How do I get the video to display full width and height in the div, without having it have those black bars on the top and/or sides, regardless of aspect ratio?

Upvotes: 1

Views: 4528

Answers (2)

David Saginashvili
David Saginashvili

Reputation: 495

Add class to frame tag

 <div class="video-wrapper">
   <iframe class="vid" src="link/to/video" frameborder="0"></iframe>
</div>

then in CSS upscale it using transform property and hide the overflow on video-wrapper class

.video-wrapper{
  overflow:hidden;
}

.vid{
 transform: scale(2.5);
}

Upvotes: 0

Taron Saribekyan
Taron Saribekyan

Reputation: 1390

Something like this:

.video-wrapper {
    position:relative;
    padding-bottom:56.25%; /* aspect ration for 16:9 */
    /*padding-top: 20px;*/ /* you can add padding-top if needed */
    height:0;
    overflow:hidden;
}

.video-wrapper iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

This will keep responsive your video for all screens.

Upvotes: 1

Related Questions