CODEWITHSUNDEEP
htmlcssiframe
wishStar
wishStar

Reputation: 1

Remove black bars on both left & right sides of an iframe video

I have an embedded video using iframe. But there are black bars on both left & right sides of the video, video original size is 2000 x 2000)

iframe currently display

html currently is:

.iframe-video {
  display: block;
  margin: 20px auto;
  width: 100%;
  height: 30vh;
  overflow: none;
}
@media (max-width: 832px) {
  .iframe-video {
    width: 100%;
    height: 30vh;
    max-width: 80vw;
  }
}
<article>

  <div class="article2">Food</div>
  <h2 class="h2a">Our New Menu is ready</h2>
  
  <iframe src="/video/menu.mp4" class="iframe-video" frameborder="0" allowfullscreen="" title="post"></iframe>

  <p>Make your reservation ASAP!</p>

</article>

Any simple way I can remove the black bars on both sides? I tried adding another <div> wrapper the current iframe and setting the padding-bottom. But seems not working.

Upvotes: 0

Views: 7141

Answers (2)

EdgarAlexPoe
EdgarAlexPoe

Reputation: 418

so the best way to make your video responsive without any black sidebars, is to nest your iframe within a parent div.
You will make this parent container "hold" the video using position: relative with the iframe displaying using position: absolute.
The key declaration for the parent element is padding: 56.25%.
This keeps the elements to 16:9 ratio and will make your video responsive.

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

https://jsfiddle.net/EdgarAlexPoe/gak5cfsh/3/

Upvotes: 0

Tlemur
Tlemur

Reputation: 21

We can use the aspect-ratio CSS property to achieve the same result as @EdgarAlexPoe with less math.

CSS:

.video-container {
  aspect-ratio: 16/9;
}
        
.video-container iframe {
  width: 100%;
  height: 100%;
}

HTML

<div class="video-container">
  <iframe width="560" height="315" 
     src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
     title="YouTube video player" 
     frameborder="0" 
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen></iframe>
</div>

link to codepen trevorleeman

Upvotes: 2

Related Questions