-1

After applying this code I am getting video over Image but I want to add Image over you-tube with play button on it

In this code when I increase the padding of the div which is (padding: 18px) now video get shorter and background Image comes on back but I want Video should play on clicking Image , video should play on the full container 

<div id="background-video" style="background: url(images/fight-c-diff.png) no-repeat; padding: 18px; width: 600px; height: 300px;">

<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0"  allowfullscreen>
</iframe>

</div>
Anurag Ranjan
  • 63
  • 3
  • 10

2 Answers2

1

Please Try This:-

<div id="background-video" style="background: url(https://cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg) top center no-repeat; background-size: cover;">

    <iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
    </iframe>
    <a class="play-btn" href="#">Play Button</a>

</div>

Js 

 jQuery('.play-btn').click(function(e) {
      e.preventDefault();
      jQuery(this).hide();
      jQuery('#background-video').find('iframe').show();
      jQuery('#background-video').find('iframe')[0].src += "?autoplay=1";
   });

CSS

#background-video { width: 640px; height: 360px; position: relative; }
#background-video iframe { width: 100%; height: 100%; display: none; }
#background-video .play-btn { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 0px; line-height: 0px; background: url(http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png) center center no-repeat; background-size: 120px auto; }
iPraxa Inc
  • 548
  • 3
  • 6
  • I tried but no changes at all 1. Image didn't come up under play icon , Image is coming but video it is overlapping over Image 2. when I click on the play button Image didn't disrepair and video plays over Image – Anurag Ranjan Aug 10 '18 at 13:43
  • I am putting height and weight on iframe tag and also div tag is it cool – Anurag Ranjan Aug 10 '18 at 13:48
0

Videojs should solve your problem in the easiest way possible :) Take a look! https://docs.videojs.com/posterimage

Michele Riva
  • 552
  • 9
  • 24