全屏背景視頻，並保持居中

我想創建一個網站，我有一些HTML5背景視頻播放。這一切都是完美的工作，它只是我想要的方式。但我也想保持中心的屏幕上的圖像，甚至當用戶改變瀏覽器。全屏背景視頻，並保持居中

<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video>

我得到這個與一些jQuery的工作，但想知道是否有一個CSS解決方案。

function resizeHandler() { 
     // scale the video 
     var documentHeight = $(document).height(); 
     var documentWidth = $(document).width(); 
     var ratio = $('#video').width()/$('#video').height(); 

     if((documentWidth/documentHeight) < ratio) { 
      $('#video').css({ 
       'width': 'auto', 
       'height': '100%', 
       'left': '0px', 
       'right': '0px', 
       'top': '0px', 
       'bottom': '0px' 
      }) 

      var marginRight = $('#video').width() - $(document).width(); 
      $('#video').css('left', -marginRight); 
     } else { 
      $('#video').css({ 
       'width': '100%', 
       'height': 'auto', 
       'left': '0px', 
       'right': '0px', 
       'top': '0px', 
       'bottom': '0px' 
      }) 

      var marginTop = $('#video').height() - $(document).height(); 
      $('#video').css('top', -marginTop); 
     } 
    }

這是我寫的jQuery，用於拉伸圖像以適應屏幕，並保持圖像的中心排序。不知道這是可能的CSS，但如果有人知道如何，這可能是好的。

來源

2011-10-27 woutr_be

是存在的，爲什麼你關心的CSS實現這一功能的原因嗎？如果它起作用，它就會起作用。 – maxedison

不是，我只是好奇是否可能在CSS中，只是好奇。 –

這是否以任何瀏覽器大小爲中心？ – Jorre

這應該使#video視窗的整體大小和留在那裏當用戶滾動。

#video { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

來源

2011-10-27 02:48:25 alex

謝謝，但它如何使視頻適合瀏覽器窗口並按比例縮放？我已經使用了相同的CSS代碼，但我無法用CSS重新創建我的jQuery –

這個問題剛纔已經提及到Place video with 100% height & 100% width using css or javascript

我想我該答案可能是你要找的人？

下面的代碼：

header { 
 
    position: relative; 
 
    height: 100vh; 
 
    z-index: 0; 
 
} 
 
header h1 { 
 
    text-align: center; 
 
    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif; 
 
    color: #fff 
 
} 
 
header video { 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -o-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
}

<header> 
 
    <h1>Sample Title</h1> 
 
\t <video autoplay loop class="bg-video"> 
 
\t \t <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4"> 
 
\t </video> 
 
</header>

而且這裏有一個working fiddle example。

希望它會幫助別人:)

來源

2015-02-18 02:05:43

我會嘗試與中心固定包裝的內部絕對位置的影像。因此，例如：

地固定包裝用100％的寬度和高度的內部視頻：

#video-wrap { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
}

中心保證金自動超大面積內的視頻：

#video { 
    position: absolute; 
    top: -9999px; 
    bottom: -9999px; 
    left: -9999px; 
    right: -9999px; 
    margin: auto; 
}

並用最小寬度和最小高度將其拉伸至全尺寸：

#video { 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
}

這裏的最終結果：

#video-wrap { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#video { 
 
    position: absolute; 
 
    top: -9999px; 
 
    bottom: -9999px; 
 
    left: -9999px; 
 
    right: -9999px; 
 
    margin: auto; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
}

<div id="video-wrap"> 
 
    <video id="video" loop autoplay> 
 
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
 
     Your browser does not support HTML5 video. 
 
    </video> 
 
</div>

這裏也是一個jsfiddle。

來源

2015-02-18 02:37:51 pschueller

使用CSS屬性。物體貼合：封面;

body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
video { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<video controls> 
 
    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
    <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
 
    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
    <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
 
</video>

來源

2017-12-06 14:57:51

全屏背景視頻，並保持居中

回答

相關問題