javascript - 如何对齐和摆脱重叠的视频？

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 {
    position: sticky;
    width: 100%;
    height: 0;
    padding-bottom: 56.27198%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 20%;
 }

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