在背景上设置 youtube 视频

Question

我正在使用引导程序，我想在后台设置 youtube 视频

我找到了这个。我如何更改此代码以使用来自 youtube 的视频？替换为不起作用

     @import url('http://fonts.googleapis.com/css?family=Oswald');

    body {
      margin: 0;
      padding: 0;
      background-attachment: fixed;
      background-size: cover;
    }

    #video-background {
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
    }

     <video autoplay="" loop="" class="fillWidth fadeIn animated" poster="https://s3-us-west-2.amazonaws.com/coverr/poster/Traffic-blurred2.jpg" id="video-background">
        <source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Traffic-blurred2.mp4" type="video/mp4">
    </video>

原文由 user6478676 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在 这里 找到了很好的解决方案。

 .video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

原文由 user6478676 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

大家好，这是我基于 YouTube Embed API 制作的可重复使用的简单 jQuery 插件。它也非常易于使用。您可以在 此处查看 实际效果。

 <div id="ytbg" data-youtube="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('[data-youtube]').youtube_background();
    });
</script>

GitHub 上 的代码

原文由 stamat 发布，翻译遵循 CC BY-SA 4.0 许可协议