CODEWITHSUNDEEP
javascripthtmlcssyoutube
Freelancer Help
Freelancer Help

Reputation: 181

Play youtube video in full screen

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?

Upvotes: 0

Views: 3561

Answers (3)

Buttered_Toast
Buttered_Toast

Reputation: 991

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 =]

Upvotes: 0

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

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

Upvotes: 0

&#214;zlem
&#214;zlem

Reputation: 79

<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%; 
}

Upvotes: 1

Related Questions