Youtube 背景

Question

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

#bigvid{

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

如何完成？

Answer 1

您好，您可以使用管状：http://www.seanmccambridge.com/tubular/ 由于tubing已经足够了，我提取了必要的代码 为你。 （以全宽和全高呈现视频，未拉伸，类似于 css 封面图像）

html代码：

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

这里有完整的 youtube API 封面样式内容，摘自 管状。需要jquery。也是标准的 youtube html5 iframe api 必须包含代码 - 如此处所示： 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

     }

 }