Question

我将这些视频“发布”到我正在建立的网站上。前两个视频正确对齐（或者我认为如此），但之后的每个视频都重叠，我不知道为什么有人可以提供帮助或提供建议？我尝试添加样式只是为了临时修复，但是当我插入代码时，它确实会在屏幕上移动。

.embed-container {
	position: sticky;
	width: 100%;
	height: 0;
	padding-bottom: 56.27198%;
	background-size: cover;
	background-repeat: no-repeat;
 }

.embed-container iframe {
	position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }

<div class='embed-container'>
			<iframe src="https://www.youtube.com/embed/GT_J4eEnmG4" "
			allowfullscreen="allowfullscreen" width="70%" height="100%" align="center">
			</iframe>
		</div>


		<div class='embed-container'>
			<iframe src="https://www.youtube.com/embed/_5Jwb0Ophdc"" 
			allowfullscreen="allowfullscreen"  width="50%" height="150%" align="center">
			</iframe>
		</div>
		
		<div class='embed-container'>
			<iframe  src="https://www.youtube.com/embed/PVY4wjF_lvo"" 
			allowfullscreen="allowfullscreen"  width="60%" height="70%" align="center" >
			</iframe>
		</div>
		
		<div class='embed-container'>
			<iframe src="https://www.youtube.com/embed/hXg78e7L3I8" " 
			allowfullscreen="allowfullscreen"  width="70%" height="100%" align="center">
			</iframe>
		</div>
		
		<div class='embed-container'>
			<iframe src="https://www.youtube.com/embed/vRE9XwMmg_o" "
			allowfullscreen="allowfullscreen"  width="50%" height="150%" align="center">
			</iframe>
		</div>
		
		<div class='embed-container'>
			<iframe src="https://www.youtube.com/embed/EgdO6DxBAvI" " 
			allowfullscreen="allowfullscreen"  width="50%" height="150%" align="center">
			</iframe>
		</div>
		
		<div class='embed-container'>
			<iframe src="<iframe width="916" height="515" src="https://www.youtube.com/embed/6zSRRfevpRw" "
			allowfullscreen="allowfullscreen"  width="50%" height="150%" align="center">
			</iframe>
		</div>

Answer 1

我认为您的视频之间没有任何空白。请在您的嵌入式容器类中添加margin-bottom，它应该可以正常工作。您应该研究网格系统或flexbox进行布局，我认为这将是一个更持久的解决方案。现在，只需更改您的embed-container类。您也可以根据需要调整边距。

.embed-container {
    position: sticky;
    width: 100%;
    height: 0;
    padding-bottom: 56.27198%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 20%;
 }

希望这会有所帮助，如果您还有更多疑问，请告诉我。

如何对齐并消除重叠的视频？

1 个答案: