0

I know this questions has been asked numerous times but I can't seem to fix the problem at my case. So I have added youtube video iframe to my website and while the video isn't playing it shows it in a full screen. Then when I click play it adds gaps on left and right and video isn't playing in a full size. I checked from console and found out that the video tag is caussing problems. I tried adding css to video tag but it seems like its not even showing in console, so it's not added.

HTML:

<iframe height="450" src="https://www.youtube.com/embed/ftAQc3L1gR4?rel=0&amp;autoplay=0&amp;loop=0&amp;modestbranding=0&amp;showinfo=0&amp;feature=0&amp;controls=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" id="player_1" style="width: 100%;"></iframe>

CSS:

iframe video {
  width: 100% inherit !important;;
  height: inherit !important;
  left: inherit !important;
  top: inherit !important;
  position: relative !important;
}

You can check the issue here: https://raadev.wpengine.com

You can go to the third slides and there will be a youtube iframe showing in 100% width, but when you click play it will show gaps on both sides.

Can anyone please help me fix this issue?

Freelancer Help
  • 141
  • 1
  • 11

3 Answers3

1
<div class="videoContainer">
    <iframe class="videoContainer__video" width="1920" height="1080" src="http://www.youtube.com/embed/IsBInsOj8TY?modestbranding=1&autoplay=1&controls=0&fs=0&loop=1&rel=0&showinfo=0&disablekb=1&playlist=IsBInsOj8TY" frameborder="0"></iframe>
</div>

And your CSS should be something like this:

.videoContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

iframe {
  /* optional */
  width: 100%;
  height: 100%; 
}
Özlem
  • 79
  • 2
  • What happend is that my whole slider dissapeared. So it doesn't work. As I said the video is showing in full width when its not playing, and when its playing it adds gap on both sides. – Freelancer Help Dec 18 '19 at 15:52
  • you could add an event listener. ``` function addClassByClick(iframe){ $(iframe).addClass("active") } ``` CSS: ``` .active { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } ``` – Özlem Dec 18 '19 at 15:56
  • It doesn't work mate. The issue is caussing the "video" tag not the iframe. You can check the link I posted and see the actual issue. – Freelancer Help Dec 18 '19 at 16:04
0

I remembered I had this problem long time ago and I made an answer here: Scale and reposition iframe like background-size: cover

It needs jQuery to make it work. (and change slightlly your iframe properties)

Fiddle

Alvaro Menéndez
  • 7,646
  • 3
  • 30
  • 53
0

From my experience you will not be able to with your current (Desktop) slider height.

Youtube will always try to keep the aspect ratio of the video so given the restriction of container widths and heights you will sometimes see black "bars" from either the left and right or top and bottom.

I deal with it by making my video link and a thumbnail and after clicking that thumbnail i open a pupup with the iframe or video i want to display.

Just keep in mind the aspect ration

Recommended YouTube video dimensions: 240p (426 x 240), 360p (640 x 360), 480p (854 x 480), 720p (1280 x 720), 1080p (1920 x 1080), 1440p (2560 x 1440), 2160p (380 x 2160) - (Source by: Kristen McCabe)

Hope this helps =]

Buttered_Toast
  • 501
  • 2
  • 10