0

I have this website.

I have a div with an embeded YouTube video and I am trying to hide the lower part of the video with a banner so that the YouTube logo that appears at the bottom is covered.

I have added another div for the banner, I used z-index and position: absolute; top:700px; to make it stack over the video but this makes the banner position unpredictable on all browser.

Firefox and IE looks good but it's not working well on Chrome or Safari because the banner is too low and doesn't cover the bottom of the video properly.

How else can I do this so that it works on all browsers? Basically I just need the banner to stack over the bottom of video so that it covers the area I want hidden.

Here's what I have

.embed-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: -80px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  z-index: -1;
}

.mask {
  position: absolute;
  top: 700px;
  right: 0px;
  width: 100%;
  height: 150px;
  background-color: #ef1446;
  z-index: 11;
}

.bottom {
  bottom: 0;
}
<div id="lgvid" class='embed-container'>
  <div class='over'></div>
  <style>
    .embed-container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      max-width: 100%;
    }
    
    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>

  <div class='embed-container'><iframe src="https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&playlist=Yo19ZhO7CAc&cc_load_policy=1rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="mask bottom">
  <br><br>
  <center>
    <h1 style="color:white;">¿Que estas buscando?</h1>
  </center>
</div>
double-beep
  • 5,031
  • 17
  • 33
  • 41
user1724434
  • 688
  • 4
  • 9
  • 24
  • its not a good idea to cover the youtube logo, its free to use because of the logo... – Adam Buchanan Smith Feb 09 '16 at 20:02
  • Why not just use vimeo? Or HTML5? – ValleyDigital Feb 09 '16 at 20:03
  • Because it's not just to hide logo, I am trying to cover part of the bottom of the video because in full width it's too tall and if I change the height of the video it creates black bars on each side so it no longer looks full width. Using Vimeo wouldn't solve the height problem while using a banner seems to work so long as I can position it correctly. – user1724434 Feb 09 '16 at 21:10

3 Answers3

0

Use Vimeo, or HTML5. If removing the YouTube logo is all you want, it's a lot less trouble doing it that way. You can download the video from Youtube, here

ValleyDigital
  • 1,460
  • 4
  • 21
  • 37
  • It's not just to cover the logo, it's also to cut off some of the bottom of the video because in full width the video is too tall and if I change the height, black bars appear on each side of the video thus I am using a 150px banner. If it was just for logo a 60px banner probably but that's would not be solving my issue entirely. – user1724434 Feb 09 '16 at 21:07
0

Another thread discusses placing a div over a youtube video, this might be what you are looking for.

How to show a div over a Youtube video (z-index)?

Community
  • 1
  • 1
VegaEX
  • 1
  • 3
0

[SOLVED] My main problem was just that the banner was not in the same position on Chrome and Safari when using z-index to stack my divs. On these two browsers, the banner was horizontally lower than in I.E. and Firefox.

I solved the issue by using a browser specific CSS hack found here: http://rafael.adm.br/css_browser_selector/

The browser specific CSS hack allowed me to position the banner in the exact position I wanted for those two browsers where the banner was out of place. I still used z-index in all style sets for all browsers just slightly different top margins for the Chrome and Safari specific CSS.

user1724434
  • 688
  • 4
  • 9
  • 24