Html 在背景上设置 youtube 视频

Set youtube video on background

提问by

I'm using bootstrap and I want to set youtube video on background

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

I found this. How could I change this code to use video from youtube? replacing with doesn't work

我找到了这个。如何更改此代码以使用来自 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>

采纳答案by

I found good solution here.

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

.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;
}

回答by Arko Ahmed

In your bodyjust add those lines.Change the id number.

在您body只需添加这些行。更改 ID 号。

 <div style="position: fixed; z-index: -99; width: 100%; height: 100%">
      <iframe frameborder="0" height="100%" width="100%" 
        src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
      </iframe>
 </div>

回答by stamat

OH HI EVERYONE, here is a reusable simple jQuery plugin I made based on YouTube Embed API. It's also super simple to use. You can see it in action here.

大家好，这是我基于 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>

Code on GitHub

GitHub 上的代码

回答by Sreehari Rajan Nair

Using Youtube API + CSS, we can build full screen youtube video background.

使用 Youtube API + CSS，我们可以构建全屏 youtube 视频背景。

HTML Markup:

HTML 标记：

<div class="page">
  <div class="video-bg">
    <div id="videoPlayer" data-videoid="b0r_dH7jfOM"></div>
  </div>
  <div class="content">
    <h1>Video Player background</h1>
    <h3>Full screen youtube video player in background.</h3>
  </div>
</div>

CSS:

CSS：

.page {
 position: relative;
 overflow: hidden;
}

.page .video-bg {
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;/* Aspect ratio */
 position: absolute;
}

.page .video-bg iframe {
 border: 0;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.page .content {
 position: relative;
 z-index: 1;
}

Add Youtube API: https://www.youtube.com/iframe_api

添加 Youtube API：https: //www.youtube.com/iframe_api

JS:

JS：

jQuery(function () {

// Youtube player
window.videoPlayer;

window.onYouTubeIframeAPIReady = function () {
 var videoPlayerId = $('#videoPlayer').attr('data-videoid');
 window.videoPlayer = new YT.Player('videoPlayer', {
  height: '1080',
  width: '1920',
  videoId: videoPlayerId,
  playerVars: {
   'controls': 0,
   'autoplay': 1,
   'mute': 1,
   'loop': 1,
   'showinfo': 0,
   'modestbranding': 1
  },
  events: {
   'onReady': onVideoPlayerReady,
   'onStateChange': onVideoPlayerReady
  }
 });
}

function onVideoPlayerReady(event) {
 videoPlayer.playVideo();
}
});

回答by ii7scw

You can use embeded videos from youtube and just put id="video-background" and remove height/width

您可以使用来自 youtube 的嵌入视频，只需放置 id="video-background" 并删除高度/宽度

<iframe id="video-background" src="https://www.youtube.com/embed/BrCKvKXvN2c?list=RDgfwMBzGA_Jo" frameborder="0" allowfullscreen></iframe>

Explained HERE

在这里解释