Question

这是我用来播放YouTube视频的代码。我想减少height的{{1}}。在这里，我将iframe从height更改为80%。所以它在视频和示例文本之间提供了空间。我想避开这个空间。这该怎么做。请提出任何建议。

100%

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	text-align:center;
	margin-bottom:1%;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80%;
}

问题：避免<div class="videoWrapper" id="tmp"> <iframe id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe> </div> some text here与文字之间的空格。

Answer 1

将否定 margin-bottom添加到iframe包装器中，即：

#videowrapper {
    margin-top: -80px;
}

然后调整边距以使其适合您

＆＃13;

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    text-align:center;
    margin-bottom: -80px;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    margin-bottom: -80px;
}

＆＃13;

<div class="videoWrapper" id="tmp">
    <iframe id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>
</div>
<div id="afteriframe">some text here</p>

＆＃13;

Answer 2

当您更改height iframe后，您还更改了视频比例。它不像以前那样是16：9。您还有div包含iframe padding-bottom设置为56.25%的{{1}} - 这是为了获得正确的视频比例而设置的 - 16：9。如果你将9除以16，那么你将得到0,5625然后将它乘以100％，你将得到56.25％。如果你想通过将视频的高度从100％降低到80％来改变视频的比例，那么将0,5625乘以80，你就会得到45。现在，如果你改变padding-bottom的.videoWrapper到45%并将height iframe设置回100%，您会看到与您的问题相同的视频比例，但您会看到视频之间没有空格和文字。

＆＃13;

.videoWrapper {
	position: relative;
	padding-bottom: 45%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	text-align:center;
	margin-bottom:1%;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

＆＃13;

<div class="videoWrapper" id="tmp">
<iframe id="crntplay" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>
</div>
 some text here

＆＃13;

但我认为没有必要改变视频比率

在iframe之后避免空间

2 个答案: