响应式“Full Div”YouTube 视频答案

【问题标题】：Responsive "Full Div" YouTube video响应式“Full Div”YouTube 视频
【发布时间】：2018-02-23 11:19:58
【问题描述】：

有没有办法将 YouTube 视频放在 div 背景中，就像 following 网站使用 <video> 标签所做的那样，视频“covering” div（即没有空格，保持原来的比例）？

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

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

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

【问题讨论】：

#video 上的 height: 100%; width: 100%; 和 margin: 0; 怎么样？这将涵盖所有内容，除非其他障碍将其推开，这是您真正的问题吗？
视频应该覆盖 Div....

标签： javascript html css youtube

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

【讨论】：

谢谢，但它是关于 YouTube 的，mp4 视频样本已经存在于链接的 OP 页面中
作为解决方案很好，你的第二个链接，但只是有一个顶部菜单问题......你可以在OP图片中看到，页面顶部有一个白色菜单......这个打破逻辑，如您所见：codepen.io/serhio/pen/XZBYea?editors=1100

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

【讨论】：

有没有办法不让空格，保持原来的比例