javascript 使用YouTube API的响应式YouTube视频背景

Posted 2021-05-04

.slides_video {
  z-index: 300;
  width: 100%;
  overflow: hidden;
  height: auto;
  padding: 80px 0;
  @include media-breakpoint-up(lg) {
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
  }
  .vid-bg{
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #222;
    @include media-breakpoint-up(md) {
      position: absolute;
      top: 0;
      left: 0;
    }

    #ytplayer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      margin: auto;
      opacity: 0.9;
      transition: opacity .5s;
    }
    .video_desc {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
    }
  }
}

<section class="cover fullscreen image-slider full_height">
      <div class="slides_video">
        <div class="vid-bg image-bg overlay">
           <div class="background-image-holder">
                <img alt="Background Image" class="background-image" src="<?= $banner_image; ?>">
            </div>

          <!--
            Video Background:
            "data-youtube-id" will be passing into our javascript
          -->
          <div class="fs-vid-background">
            <div class="video-background" data-youtube-id="<?php echo $banner_video_id; ?>"></div>
            <div id="ytplayer" class="screen"></div>

          </div>

          <!-- <div class="video_desc"> -->
            <div class="container v-align-transform">
              <div class="row">
                <div class="col-sm-12 text-center">
                  <h1 class="large"><?php echo $banner_title; ?></h1>
                  <p classphp"lead mb0">
                    <?php echo $banner_subtitle; ?>
                  </p>
                </div>
              </div>
            </div>
          <!-- </div> -->
        </div>
      </div>
</section>

// Reference : https://developers.google.com/youtube/iframe_api_reference

		// script below will create "YouTube" iframe and append to header script tag 
		var player;

        // 2. This code loads the IFrame Player API code asynchronously.
		var tag = document.createElement("script");
		var firstScriptTag = document.getElementsByTagName("script")[0];
		var w = window.innerWidth;
		var h = window.innerHeight;
		tag.src = "https://www.youtube.com/iframe_api";
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


		// 3. This function creates an <iframe> (and YouTube player)
		//    after the API code downloads.
		function onYouTubePlayerAPIReady() {
		  var youtubeId = jQuery(".video-background").data("youtubeId");
		  player = new YT.Player("ytplayer", {
		    videoId: youtubeId,
		    playerVars: {
		      'playsinline': 1,
		      'autoplay': 1,
		      'controls': 0, // Hides the player controls
		      'autohide': 1,
		      'enablejsapi': 1,
		      'loop': 1,
		      'disablekb': 1,
		      'fs': 0,
		      'modestbranding': 0,
		      'showinfo': 0,
		      'rel': 0, // Disable related videos
		      'playlist': youtubeId // You need 'playlist' to use loop
		    }
		  });


		  // 
		  var w = jQuery(window).width() + 200;
		  var h = jQuery(window).height() + 200;

		  if (w / h > 16 / 9) {
		    player.setSize(w, w / 16 * 9);
		    jQuery(".vid-bg .screen").css({ left: "0px" });

		  } else {
		    player.setSize(h / 9 * 16, h);
		    jQuery(".vid-bg .screen").css({
		      left: -(jQuery(".vid-bg .screen").outerWidth() - w) / 2
		    });

		  }
		}


		// This function will automatically calculate the windows width and height 
		function vidRescale(){
		  var width      = window.innerWidth;
		  var height     = window.innerHeight;
		  var ratio      = 16 / 9;
		  var new_width  = 0;
		  var new_height = 0;
		  var top_offset = 0;


		// Is the video display area landscape or protrait?
		// If window width (window_width ) divided by 16/9 (1.77777778) bigger than window_height then the display window is portrait, set the height of the window, make the width propotional but negatively space it.
		  if (width / ratio < height) {

	        // Work out the width you want from the height (rounding up)
		    new_width = Math.ceil(height*ratio);

		    //Negatively pad the left side of the video to centre the video
		    left_offset = (width - new_width) /2;

		    // set YouTube player sizes
		    player.setSize(new_width, height);
		    jQuery(".vid-bg .screen").css({left:left_offset});

		  } else {

  	        // Landsacape viewable area, you will need to offset the height
		    new_height = Math.ceil(width / ratio);
		    player.setSize(width, new_height);
		    top_offset = (height - new_height) / 2;
		    jQuery(".vid-bg .screen").css({ left: -(jQuery(".vid-bg .screen").outerWidth() - width) / 2});
		  }

		}
		window.addEventListener('resize', function () {
		  vidRescale();
		});