gpt4 book ai didi

video - 如何使用响应式设计嵌入 vimeo 视频

转载 作者:行者123 更新时间:2023-11-28 21:39:39 25 4
gpt4 key购买 nike

我在互联网上做了很多研究,但这个问题并不完全相同。我想使用 <iframe> 嵌入来自 vimeo 的视频标签。我也试过这段代码:

.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

<div class="video-responsive">
<iframe width="420" height="315" src="https://www.vimeo.com" frameborder="0" allowfullscreen></iframe>
</div>

但是如果你有一个大屏幕,它也会变大,那看起来就不太好了。我只是希望它缩小不超过提供的 widthheight .

最佳答案

这对我有用。我用的是bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>

</body>
</html>

关于video - 如何使用响应式设计嵌入 vimeo 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49765190/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com