Question

有没有办法在div背景中放置 YouTube 视频，例如following网站带有<video>标记，视频“涵盖< / strong>“div（即没有剩余空格，保持原始比率）？

了解在HTML5中实际显示YouTube视频的推荐方式是iframe：

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>

我试图在this codePen上模拟相同的行为。

Answer 1

试试这个：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
    font-size: 17px;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
}

#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}
</style>
</head>
<body>

<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

<script>
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
</script>

</body>
</html>

Answer 2

这是一个解决方案：

https://codepen.io/anon/pen/XZBVvN

#video{
  display:block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top:0;
  left:0;
  z-index: 0;
}
#videoMessage{
   color:white;    
   position:fixed;
}

响应“Full Div”YouTube视频

2 个答案: