【问题标题】:Youtube BackgroundYoutube 背景
【发布时间】:2015-03-17 17:31:16
【问题描述】:

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

#bigvid{

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

如何完成?

【问题讨论】:

  • jquery.backgroundvideo.js 这个插件可以帮到你。

标签: css video background youtube


【解决方案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

     }

 }

【讨论】:

    猜你喜欢
    • 2021-12-13
    • 1970-01-01
    • 2017-05-27
    • 1970-01-01
    • 1970-01-01
    • 2020-03-26
    • 2014-09-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多