"float: right" 属性 的视频无法播放 - 被文字遮挡
Video with "float: right" property will not play - obstructed by text
我想将文本环绕在视频元素周围，我使用 float: right 实现了这一点。然而，即使文本以我想要的方式在视觉上环绕视频，但前两个段落元素的宽度覆盖了视频，因此我无法按下播放，视频根本无法播放。
.video {
float: right;
margin-left: 10px;
margin-bottom: 10px;
z-index: 5000;
width: 50%;
}
.obstructing-video {
width: 50%;
margin-right: 0!important;
padding-right: 0!important;
}
<div>
<video class="video">
<source src="/videos/video.mp4" type="video/mp4">
</video>
<div>
<p class="obstructing-video">text text text text text etc etc</p>
<p class="obstructing-video">text text text text text etc etc</p>
<p>text text text text text etc etc</p>
<p>text text text text text etc etc</p>
</div>
</div>
如您所见，我已尝试声明 p 元素的宽度，这似乎是问题所在，但在 Web 开发人员工具中，我可以看到边距仍覆盖视频。因此我将 margin-right 和 padding-right 设置为 0 但没有运气。我也试过调整视频的z-index，但还是不行。
这是什么问题？谢谢
你应该使用 flexbox 而不是 float。这里是 the complete guide.
所以在你的情况下，你的代码是
main{
display: flex;
flex-wrap: wrap
// give the opportunity for the content to wrap on smaller screen
}
video{
flex: 1 1 50%
// the video can grow and shrink and his basic width is 50%
}
main div{
flex: 1 1 50%
}
<div class="main">
<video></video>
<div>
<p></p>
...
<p></p>
</div>
</div>
如果您想要在视频顶部有两行文本，则必须为视频顶部的那些行创建一个单独的 div 并设置一个弹性为 1 1 100%.
浮动的正确用法是让文本在图像（本例中为视频）周围浮动。
但是，这似乎与您的问题无关。除此之外，您还使用 z-index 将视频从文本的堆叠上下文中移出。如果您尝试该代码段（基本上是您的代码段，但 p 元素具有背景颜色），您会发现它们没有与视频元素重叠，而是在下方。
视频元素没有控件属性。如果您像片段中那样输入一个，您将看到可以启动视频。
.video {
float: right;
margin-left: 10px;
margin-bottom: 10px;
z-index: 5000;
width: 50%;
}
.obstructing-video {
width: 50%;
rmargin-right: 0!important;
rpadding-right: 0!important;
}
p {
background-color: pink;
}
<div>
<video class="video" controls>
<source src="https://ahweb.org.uk/butterfly.mp4" type="video/mp4">
</video>
<div>
<p class="obstructing-video">text text text text text etc etc</p>
<p class="obstructing-video">text text text text text etc etc</p>
<p>text text text text text etc etc</p>
<p>text text text text text etc etc</p>
</div>
</div>
但您真正想要的是浮动能够正确地充当浮动，这样如果文本很多，文本就会环绕。这是相同的代码段，但删除了 z-index 和更多文本。
.video {
float: right;
margin-left: 10px;
margin-bottom: 10px;
width: 50%;
}
.obstructing-video {
width: 50%;
rmargin-right: 0!important;
rpadding-right: 0!important;
}
p {
background-color: pink;
}
<div>
<video class="video" controls>
<source src="https://ahweb.org.uk/butterfly.mp4" type="video/mp4">
</video>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus euismod lectus non tincidunt. Donec augue sapien, scelerisque eget massa eu, placerat volutpat urna. Pellentesque libero tellus, ultrices et viverra at, varius vitae ex. Suspendisse nunc diam, placerat vel ex ac, tincidunt pretium urna. Phasellus eget egestas odio. Vestibulum nec congue elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer interdum in ipsum ut euismod. Vivamus eget eros ante. Vestibulum quis leo hendrerit, pretium massa et, condimentum elit. Nulla dolor mi, pharetra et ultrices id, mattis ac neque.
Nulla turpis odio, faucibus nec nisl a, laoreet hendrerit elit. Ut elementum dignissim turpis, vitae finibus diam semper sit amet. Phasellus maximus fermentum elit, nec consequat libero vulputate vel. Suspendisse euismod fermentum quam, nec semper risus fringilla ut. Vivamus vehicula metus eu orci facilisis, vel blandit justo suscipit. Quisque felis mi, hendrerit non viverra vitae, malesuada ac mauris. Phasellus tortor nisl, consequat et metus in, porta facilisis lorem. Nunc a finibus risus, non rutrum risus. In ipsum orci, luctus eget eros sed, congue viverra lacus. Nulla ut ante ipsum.
Quisque eu ligula at nisl sollicitudin cursus sit amet in eros. Nunc tincidunt purus augue, nec vestibulum urna condimentum nec. Integer faucibus felis dolor, at euismod risus imperdiet et. Donec tristique mauris neque, vel dapibus enim mattis at. Fusce id fermentum arcu. Fusce vestibulum convallis sodales. Morbi suscipit vestibulum nulla, ut fringilla mi elementum nec. Phasellus ac auctor tellus, vel venenatis felis. Aenean congue tellus urna, id sodales elit ultrices vitae. Nullam posuere magna ut nisi vulputate, vitae eleifend dui tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus sapien augue, ut placerat orci tempor sed. Cras pharetra libero nec lacinia sodales. Donec vel nisi ac purus dictum ornare. Phasellus varius odio a pellentesque porttitor.
Maecenas euismod nibh lectus, vitae dignissim dui ultrices eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus pretium ut lorem sit amet posuere. Fusce bibendum felis diam, sit amet vestibulum eros maximus vitae. Nulla sagittis odio nec erat fringilla faucibus. Cras erat sem, accumsan at auctor et, convallis at nisi. Cras lectus mi, consequat a felis eu, faucibus ornare magna. Duis nunc sapien, facilisis porta erat at, elementum vehicula metus. Donec sed dui est. Donec eros nunc, faucibus sit amet malesuada vitae, efficitur sed ligula. Cras porta, nisl quis rhoncus vehicula, ipsum nibh rhoncus quam, in fringilla mi velit nec ipsum. Etiam mi ex, finibus et tellus at, scelerisque aliquet ex. Aliquam erat volutpat. Vestibulum ut mi non felis consequat convallis.
Duis tristique elit felis, ac posuere lacus tempus eget. Duis sit amet consequat eros. Vestibulum vitae magna ut orci faucibus iaculis. Integer mattis ligula ut finibus venenatis. Nam lacus turpis, vestibulum id tincidunt at, interdum ac nibh. In ac elit convallis augue gravida vehicula non in elit. Cras lectus velit, faucibus sit amet posuere sit amet, condimentum luctus justo. Donec mollis vestibulum velit, ut tincidunt dolor elementum et. Quisque id auctor neque, eu sagittis metus. Nullam porttitor fermentum tempor. Aliquam erat volutpat. Integer laoreet aliquet diam ut fringilla. Duis at orci ac libero elementum auctor. Cras eget placerat libero. Sed scelerisque vel lacus quis placerat. Nulla facilisis lobortis turpis in porta.
</div>
</div>
我想将文本环绕在视频元素周围，我使用 float: right 实现了这一点。然而，即使文本以我想要的方式在视觉上环绕视频，但前两个段落元素的宽度覆盖了视频，因此我无法按下播放，视频根本无法播放。
.video {
float: right;
margin-left: 10px;
margin-bottom: 10px;
z-index: 5000;
width: 50%;
}
.obstructing-video {
width: 50%;
margin-right: 0!important;
padding-right: 0!important;
}
<div>
<video class="video">
<source src="/videos/video.mp4" type="video/mp4">
</video>
<div>
<p class="obstructing-video">text text text text text etc etc</p>
<p class="obstructing-video">text text text text text etc etc</p>
<p>text text text text text etc etc</p>
<p>text text text text text etc etc</p>
</div>
</div>
如您所见，我已尝试声明 p 元素的宽度，这似乎是问题所在，但在 Web 开发人员工具中，我可以看到边距仍覆盖视频。因此我将 margin-right 和 padding-right 设置为 0 但没有运气。我也试过调整视频的z-index，但还是不行。
这是什么问题？谢谢
你应该使用 flexbox 而不是 float。这里是 the complete guide.
所以在你的情况下，你的代码是
main{
display: flex;
flex-wrap: wrap
// give the opportunity for the content to wrap on smaller screen
}
video{
flex: 1 1 50%
// the video can grow and shrink and his basic width is 50%
}
main div{
flex: 1 1 50%
}
<div class="main">
<video></video>
<div>
<p></p>
...
<p></p>
</div>
</div>
如果您想要在视频顶部有两行文本，则必须为视频顶部的那些行创建一个单独的 div 并设置一个弹性为 1 1 100%.
浮动的正确用法是让文本在图像（本例中为视频）周围浮动。
但是，这似乎与您的问题无关。除此之外，您还使用 z-index 将视频从文本的堆叠上下文中移出。如果您尝试该代码段（基本上是您的代码段，但 p 元素具有背景颜色），您会发现它们没有与视频元素重叠，而是在下方。
视频元素没有控件属性。如果您像片段中那样输入一个，您将看到可以启动视频。
.video {
float: right;
margin-left: 10px;
margin-bottom: 10px;
z-index: 5000;
width: 50%;
}
.obstructing-video {
width: 50%;
rmargin-right: 0!important;
rpadding-right: 0!important;
}
p {
background-color: pink;
}
<div>
<video class="video" controls>
<source src="https://ahweb.org.uk/butterfly.mp4" type="video/mp4">
</video>
<div>
<p class="obstructing-video">text text text text text etc etc</p>
<p class="obstructing-video">text text text text text etc etc</p>
<p>text text text text text etc etc</p>
<p>text text text text text etc etc</p>
</div>
</div>
但您真正想要的是浮动能够正确地充当浮动，这样如果文本很多，文本就会环绕。这是相同的代码段，但删除了 z-index 和更多文本。
.video {
float: right;
margin-left: 10px;
margin-bottom: 10px;
width: 50%;
}
.obstructing-video {
width: 50%;
rmargin-right: 0!important;
rpadding-right: 0!important;
}
p {
background-color: pink;
}
<div>
<video class="video" controls>
<source src="https://ahweb.org.uk/butterfly.mp4" type="video/mp4">
</video>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus euismod lectus non tincidunt. Donec augue sapien, scelerisque eget massa eu, placerat volutpat urna. Pellentesque libero tellus, ultrices et viverra at, varius vitae ex. Suspendisse nunc diam, placerat vel ex ac, tincidunt pretium urna. Phasellus eget egestas odio. Vestibulum nec congue elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer interdum in ipsum ut euismod. Vivamus eget eros ante. Vestibulum quis leo hendrerit, pretium massa et, condimentum elit. Nulla dolor mi, pharetra et ultrices id, mattis ac neque.
Nulla turpis odio, faucibus nec nisl a, laoreet hendrerit elit. Ut elementum dignissim turpis, vitae finibus diam semper sit amet. Phasellus maximus fermentum elit, nec consequat libero vulputate vel. Suspendisse euismod fermentum quam, nec semper risus fringilla ut. Vivamus vehicula metus eu orci facilisis, vel blandit justo suscipit. Quisque felis mi, hendrerit non viverra vitae, malesuada ac mauris. Phasellus tortor nisl, consequat et metus in, porta facilisis lorem. Nunc a finibus risus, non rutrum risus. In ipsum orci, luctus eget eros sed, congue viverra lacus. Nulla ut ante ipsum.
Quisque eu ligula at nisl sollicitudin cursus sit amet in eros. Nunc tincidunt purus augue, nec vestibulum urna condimentum nec. Integer faucibus felis dolor, at euismod risus imperdiet et. Donec tristique mauris neque, vel dapibus enim mattis at. Fusce id fermentum arcu. Fusce vestibulum convallis sodales. Morbi suscipit vestibulum nulla, ut fringilla mi elementum nec. Phasellus ac auctor tellus, vel venenatis felis. Aenean congue tellus urna, id sodales elit ultrices vitae. Nullam posuere magna ut nisi vulputate, vitae eleifend dui tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus sapien augue, ut placerat orci tempor sed. Cras pharetra libero nec lacinia sodales. Donec vel nisi ac purus dictum ornare. Phasellus varius odio a pellentesque porttitor.
Maecenas euismod nibh lectus, vitae dignissim dui ultrices eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus pretium ut lorem sit amet posuere. Fusce bibendum felis diam, sit amet vestibulum eros maximus vitae. Nulla sagittis odio nec erat fringilla faucibus. Cras erat sem, accumsan at auctor et, convallis at nisi. Cras lectus mi, consequat a felis eu, faucibus ornare magna. Duis nunc sapien, facilisis porta erat at, elementum vehicula metus. Donec sed dui est. Donec eros nunc, faucibus sit amet malesuada vitae, efficitur sed ligula. Cras porta, nisl quis rhoncus vehicula, ipsum nibh rhoncus quam, in fringilla mi velit nec ipsum. Etiam mi ex, finibus et tellus at, scelerisque aliquet ex. Aliquam erat volutpat. Vestibulum ut mi non felis consequat convallis.
Duis tristique elit felis, ac posuere lacus tempus eget. Duis sit amet consequat eros. Vestibulum vitae magna ut orci faucibus iaculis. Integer mattis ligula ut finibus venenatis. Nam lacus turpis, vestibulum id tincidunt at, interdum ac nibh. In ac elit convallis augue gravida vehicula non in elit. Cras lectus velit, faucibus sit amet posuere sit amet, condimentum luctus justo. Donec mollis vestibulum velit, ut tincidunt dolor elementum et. Quisque id auctor neque, eu sagittis metus. Nullam porttitor fermentum tempor. Aliquam erat volutpat. Integer laoreet aliquet diam ut fringilla. Duis at orci ac libero elementum auctor. Cras eget placerat libero. Sed scelerisque vel lacus quis placerat. Nulla facilisis lobortis turpis in porta.
</div>
</div>