css - YouTube 背景

Question

我正在尝试创建一个以 Youtube 视频作为背景和固定透明导航的首页。我都有，但我希望视频背景从页面的最顶部开始。这是一个例子；

#bigvid{

https://jsfiddle.net/ackvq0x2/1/embedded/result/

如何完成？

Answer 1

Hi, you could use tubular: http://www.seanmccambridge.com/tubular/ as tubular is quite suffisticated, i extracted the necessary code for you. (renders the video in full width and height, NOT stetched, similar to a css cover image)

html code:

<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
            <div id="player" style="position: absolute">
</div>

here comes the complete youtube API cover style stuff, extracted from tubular. jquery is needed. Also the standard youtube html5 iframe api code must be included - as given here: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

 var ratio = 16 / 9;
 window.onPlayerReady = function (e) {
     resize();
 }

 $(window).on('resize', function () {
     resize();
 })

 var resize = function () {
     console.log("resize");

 var heightcorrection = 0,
         width = $(window).width(),
         pWidth, // player width, to be defined
         height = $(window).height() - heightcorrection,
         pHeight, // player height, tbd
         $videoPlayer = $('#player');        

     if (width / ratio < height) { // if new video height < window height (gap underneath)
         pWidth = Math.ceil(height * ratio); // get new player width
         $videoPlayer.width(pWidth).height(height).css({
             left: (width - pWidth) / 2,
             top: 0
         }); // player width is greater, offset left; reset top  

     } else { // new video width < window width (gap to right)
         pHeight = Math.ceil(width / ratio); // get new player height
         $videoPlayer.width(width).height(pHeight).css({
             left: 0,
             top: (height - pHeight) / 2 
         }); // player height is greater, offset top; reset left

     }

 }