Button Overlay on Video

Question

Why does the 2nd video not show the gif ?

.container2 {
  position: relative;
}

.container2 > .player-buttons1 {
  background: url('https://media.tenor.com/images/0a1652de311806ce55820a7115993853/tenor.gif') center center;
  height: 35px;
  left: 13%;
  margin: -64px 0 0 -64px;
  position: absolute;
  top: 50%;
  width: 35px;
  z-index: 1;
}

.container2 > .player-buttons {

  height: 35px;
  left: 13%;
  margin: -64px 0 0 -64px;
  position: absolute;
  top: 75%;
  width: 35px;
  z-index: 1;
}
.btn1 {
  color: var(--nav-text-color);
  font-weight: bold;
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 150ms ease-out;
  font-size: 8px;
}

.btn-open {
  background-color: #328fff;
  border-radius: 8px;
  margin: 0px; /* adjust as needed */
 padding: 0px; /* adjust as needed */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 0 0 rgba(0, 0, 0, 0.3) inset;
}
.btn-open:hover {
  background-color: #4CAF50;
  color: white;
}

HTML Code

      <ul id="autoWidth" class="cs-hidden">
        <li class="item-a" data-id="1">
          <div class="container2">
      <video autoplay muted loop playsinline id="video1" style="width:100%;margin:0 auto; height:100%;">

Discover More http://google.com';">

Problem Right Now: CSS working fine for desktop view ( get what i wanted , just the mobile view button is not showing properly ) The Button is out of video border, and make it unable to show properly

I wuold suggest you to use `HTML5` [video](https://www.w3schools.com/tags/att_video_poster.asp) tag like mention here .https://stackoverflow.com/questions/20075875/how-to-set-the-thumbnail-image-on-html5-video — Awais, Jan 15 '20 at 10:26

mplungjan · Answer 1 · 2020-01-16T08:25:27.477

Fix the HTML and it will work

Your HTML is invalid and the player button is not a direct child of the container in the second example

You have two playerbuttons on the second example which have the same offset. I removed one

.container2 {
  position: relative;
}

.container2 > .player-buttons {
  background: url('https://media.tenor.com/images/0a1652de311806ce55820a7115993853/tenor.gif') center center;
  height: 128px;
  left: 50%;
  margin: -64px 0 0 -64px;
  position: absolute;
  top: 50%;
  width: 128px;
  z-index: 1;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<ul id="autoWidth" class="cs-hidden">
  <li class="item-a" data-id="1">
    <div class="container2">
      <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
      <div class="player-buttons" onclick="window.location='http://google.com';"></div>
    </div>
  </li>
  <li class="item-b" data-id="2">
    <div class="container2">
      <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
      <div class="player-buttons" onclick="window.location='http://google.com';"></div>
    </div>
  </li>
</ul>

Thanks , look like there is problem on my HTML tag after using the code all fine now . But i have a question is that When in "Desktop" view , the gif stay on the video when playing , but when i play on "Mobile" , the gif dissapeared . — greenboxgoolu, Jan 15 '20 at 09:58
https://imgur.com/fULTUDv , here is an example , the button won't auto resize. ( used new CSS - edited in first post ) — greenboxgoolu, Jan 16 '20 at 04:32
updated jsfiddle with the one i currenlty using ( except for the video tag ) - currently using video tag in my site . — greenboxgoolu, Jan 16 '20 at 04:45
I do not know what to look for. You have TWO player buttons on the second video with the same offset so overlapping — mplungjan, Jan 16 '20 at 08:24
updated jsfiddle to latest . What the problem i am facing is that the "Button" is not mobile friendly , when i view the page in "mobile" the button is messed up — greenboxgoolu, Jan 16 '20 at 08:51

score 2 · Accepted Answer · answered Jan 17 '20 at 10:10

I modified @mplungjan answer. I added media query to show button properly in mobile device. See below snippet

.container2 {
  position: relative;
}

.container2 > .player-buttons {
  background: url('https://media.tenor.com/images/0a1652de311806ce55820a7115993853/tenor.gif') center center;
  height: 128px;
  left: 50%;
  margin: -64px 0 0 -64px;
  position: absolute;
  top: 50%;
  width: 128px;
  z-index: 1;
}

@media (max-width: 520px) {
    .container2 > .player-buttons {
        width: 50px;
        height: 50px;
        left: 39%;
        top: 33%;
        margin: 0;
    }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<ul id="autoWidth" class="cs-hidden">
  <li class="item-a" data-id="1">
    <div class="container2">
      <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
      <div class="player-buttons" onclick="window.location='http://google.com';"></div>
    </div>
  </li>
  <li class="item-b" data-id="2">
    <div class="container2">
      <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
      <div class="player-buttons" onclick="window.location='http://google.com';"></div>
    </div>
  </li>
</ul>

Sorry for the slow reply , yeah this is the one i needed. Thanks — greenboxgoolu, Jan 20 '20 at 02:18

Button Overlay on Video

2 Answers2