时间戳

首页 > 解决方案 > 可缩放的全屏 BG 视频

html - 可缩放的全屏 BG 视频

问题描述

无论屏幕大小如何，我都试图让这个背景视频覆盖视口。如果屏幕足够宽，我可以正常工作：

在此处输入图像描述

但如果屏幕太窄，我会在顶部和底部看到空条： 在此处输入图像描述

我希望它覆盖视口。这是我的代码：

.video-background {
    position: absolute;
    top: 50%;
    left: 0;
    padding-top: 56.25%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: 2s opacity ease;
    transition: 2s opacity ease;
    opacity: 1;
    z-index: -1;
}

.video-foreground, .video-background iframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: -1;
}
    <section class="full-height-outer home-banner loading" id="home-banner-box">
        <div class="video-background">   
            <div class="video-foreground" id="YouTubeBackgroundVideoPlayer">
            </div>
        </div>
        <div>
            <H1 id="title" class="title">This is the title of my site</H1>
            <p class="subtitle">And this is a great subtitle that describes what this page is all about.</p>
        </div>
    </section>

有小费吗？

标签： htmlcssvideo

解决方案

我认为问题在于我正在使用 YouTube 视频。大小在 JavaScript 中设置。使用 ojbect-fit:cover 只会将白条变成黑条。YouTube 播放器现在覆盖了屏幕，但视频的纵横比仍然会导致顶部和底部出现黑条。

目前，我修复它的方法是使 JavaScrpt 中的尺寸非常大，并调整 CSS。顶部和底部视频信息的负边距削减。我仍然觉得会有更好的方法来做到这一点。

你可以在这里看到现场版本：http: //spfict.com/

function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('YouTubeBackgroundVideoPlayer', {
      videoId: 'rEagPJY9hwY', // YouTube Video ID
      width: 2249,               // Player width (in px)
      height: 1265,              // Player height (in px)
      playerVars: {
        playlist: 'rEagPJY9hwY',
          autoplay: 1,        // Auto-play the video on load
          autohide: 1,
          disablekb: 1, 
          controls: 0,        // Hide pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 0,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          autohide: 0,         // Hide video controls when playing
          rel: 0,
          enablejsapi: 1
      },
      events: {
        onReady: function(e) {
            e.target.mute();
            e.target.setPlaybackQuality('hd1080');
        },
        onStateChange: function(e) {
          if(e && e.data === 1){
              var videoHolder = document.getElementById('home-banner-box');
              if(videoHolder && videoHolder.id){
                videoHolder.classList.remove('loading');
              }
          }else if(e && e.data === 0){
            e.target.playVideo()
          }
        }
      }
  });
}
.video-foreground, .video-background iframe {
    position: fixed;
    top: -60px;
    min-width: 100%;
    min-height: 100%;
    pointer-events: none; 
    overflow: hidden;
    display: flex;
    z-index: -10;
    -webkit-transition: 2s opacity ease;
    transition: 2s opacity ease;
    opacity: 1;
}
        <section class="full-height-outer home-banner loading" id="home-banner-box">
            <div class="video-foreground" id="YouTubeBackgroundVideoPlayer"></div>
            <div>
                <H1 id="title" class="title">This is the title of my site</H1>
                <p class="subtitle">And this is a great subtitle that describes what this page is all about.</p>
            </div>
        </section>

推荐阅读