CODEWITHSUNDEEP
htmlcssbackgroundyoutube
Fahad Hasan
Fahad Hasan

Reputation: 10506

Change the background colour of YouTube Video embed

I was wondering if there's any way to change the background-colour of the YouTube screen which appears when the embedded video is initially loading (image attached below)? Currently, it has a black background colour which I wanted to change to white; I tried adding theme=light to the URL but that didn't help. I also searched for this option inside the YouTube Embedded Players and Player Parameters document but couldn't find anything related to this. This is how my video embed code looks like:

<iframe width="770" height="434" src="//www.youtube.com/embed/(video code)?theme=light&modestbranding=1&autohide=1&showinfo=0&controls=0&rel=0&vq=hd1080" frameborder="0" allowfullscreen></iframe>

enter image description here

Upvotes: 13

Views: 35864

Answers (4)

Gal Aharon
Gal Aharon

Reputation: 11

This is very annoying,

For anyone who seek for an easy workaround to hide the 2px black bezels, I used a similar solution as Simon_Weaver metioned earlier. I simply added a pseudo element (:before) to the iframe's parent container, and it's working like a charm, no bezels whatsoever.

.vid-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
    
.vid-container:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    outline: 4px solid #fff;
    outline-offset: -2px;
    pointer-events: none;
  }
    
.vid-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

Upvotes: 0

Simon_Weaver
Simon_Weaver

Reputation: 145950

This is such a massive pain that only black is supported.

A bigger problem I've always had is it's almost impossible to set a width and height that rounds exactly on all screens to avoid black bars on left / top / right / bottom. These can be especially apparent on 2x and 3x screens or when using a percentage for the width.

I'm talking specifically about 1 or 2 pixels of black on one or more sides, not the large letter-boxing. So I've set the video to 16x9 aspect ratio but it doesn't round exactly to an exact number of pixels.

Have often had to add an .overlay layer on top of the iframe with something like:

overlay
{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    // knock out nasty borders
    outline: 2px solid white !important;
    outline-offset: -1px;

    pointer-events: none;
}

If only we could set the background to white it might help fix this :-(

Upvotes: 0

Ian Bradbury
Ian Bradbury

Reputation: 1475

Google YouTube themes have been deprecated:

This parameter indicates whether the embedded player will display player controls (like a play button or volume control) within a dark or light control bar. This parameter has been deprecated for HTML5 players, which always use the dark theme.

Upvotes: 4

BX69
BX69

Reputation: 431

Hack would be to hide the video with another div.

<iframe id="myvideo" width="770" height="434" src="//www.youtube.com/embed/TIfAkOBMf5A" frameborder="0" allowfullscreen></iframe>
<div id="myloadscreen" style="width:770px;height:434px;position:relative;top:-438px;background-color:#fff;background-image: url('https://i.sstatic.net/h6viz.gif');background-repeat:no-repeat;background-position:center;left:0px;"></div>

See this JSFiddle JSFiddle.net/3mzfzm76/.

Then, when it loads hide the div.

Upvotes: -2

Related Questions