2

I'm trying to get a YouTube video to load and span the entire with and height of a div (hero__container--teaser). I've managed to get the video to load but unsure on how I can make it the div's background?

Here's my hero.js:

      //  Load  IFrame Player API 
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // Creating iframe
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          videoId: 'jagIsKF8oVA',        
          playerVars: {'autoplay': 1, 'controls': 0, 'mute' : 1, 'loop': 1, 'rel': 0 },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      //  Calls function
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      var done = false;
      function onPlayerStateChange(event) {
        // if (event.data == YT.PlayerState.PLAYING && !done) {
        //   setTimeout(stopVideo, 6000);
        //   done = true;
        // }
      }
      function stopVideo() {
        // player.stopVideo();
      }
<div id="player"></div>

  <section id="videoHero" class="hero hero--video">

  <!-- Where I want video to load -->
  <div class="player hero__container--teaser">

  </div>

</section>

Idea's?

ANSWER: https://codepen.io/GAUTAMRAJU15/pen/wENdzg This link contains Answer . IT WRAPS DIV AROUND IFRAME

0xAnon
  • 847
  • 9
  • 20
Freddy
  • 683
  • 4
  • 35
  • 114
  • Use the [2nd answer solution](https://stackoverflow.com/a/33300299/1891677). The linked article explains the technique. – tao Sep 20 '18 at 11:43
  • @AndreiGheorghiu I'm not looking to just echo out the video in an – Freddy Sep 20 '18 at 11:58
  • That's great, @Freddy. However, it has nothing to do with the resizing of container technique. Control the ratio of your container `
    ` using the bottom padding percentage technique, make it relative and give the YT API's iframe `position:absolute; width: 100%; left:0; top:0;`.
     – tao Sep 20 '18 at 12:05
  • If you're loading dynamic videos and w/h ratio might vary, use [this answer](https://stackoverflow.com/questions/5010495/how-to-get-youtube-video-aspect-ratio) to retrieve current video's ratio and change the parent's `padding-bottom` dynamically. – tao Sep 20 '18 at 12:09
  • @AndreiGheorghiu - ah, let me check if I'm doing this correctly - https://jsfiddle.net/2dqw1hc9/4/ - I've tried to play around, can't get the video span the div's height and width. – Freddy Sep 20 '18 at 12:29
  • @AndreiGheorghiu also thanks for your help so far :) – Freddy Sep 20 '18 at 12:29
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180441/discussion-between-andrei-gheorghiu-and-freddy). – tao Sep 20 '18 at 12:32

0 Answers0