Youtube Video with Youtube API inside an image responsive like a TV

user_9659969 0
Viewed 118

I´m trying to put a video inside an image that appears like a tv. I wanted to be responsive and in the center of the screen. My attempt puts the video below the image and I can´t play it. ALready tried to mess with the z-index attribute but no luck.

Note: using Bootstrap 4

 <style>
  .video-container { 
    position: relative; 
    overflow: hidden; 
  } 
 
 .tv img {
  position: absolute;
  z-index: -10;
 }
 </style>

      <script>
    
    var player;

    function onYouTubePlayerAPIReady() {
      player = new YT.Player('yt', {
        height: '100%',
        width: '100%',
        videoId: 'WMn1_DAIpIs',
        playerVars: { 'autoplay': 1, 'controls': 0, 'showinfo': 0 },
        events: {
          'onReady': onPlayerReady, // function when the player is ready 
          'onStateChange': onPlayerStateChange // function called when the player changes state (playing, stoped, paused, etc.)
        }
      });
    }
</script>



<div class="row align-items-center">
      <div class="col">
         <div class="video-container ">
           <img src="src/images/tv31.png" class="img-fluid">
           <div class="tv" id=yt></div>
          </div>
       </div>
    </div>
 </div>
youtube-api css html javascript
1 Answers

I don’t think you’ll be able to put your video behind the image, as that would leave the image blocking the video controls.

You could put your TV frame behind the video and size the video using Bootstrap’s embed-responsive embed-responsive-16by9 classes to properly size the video. For your image, you can have your image match the padding around the video. In the example below, I set the padding to 5% and sized the image to match the space.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-md mt-5">
    <div class="row">
        <div class="col-12 col-md-3 text-center">
            <h1>Video in the middle</h1>
        </div>
        <div class="col-12 col-md-6 px-0">
            <img class="position-absolute w-100 img-fluid" src="https://via.placeholder.com/570x346.png?text=TV Frame">
            <div style="padding: 5%;">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/WMn1_DAIpIs?rel=0" frameborder="0" rel=0"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

You can see how the video frame works with the image behind it in the snippet. To see the video run, I think you'll need to copy the code to your system.

user_10119840
Related