我有一个嵌入的 vimeo 视频，但问题是它没有覆盖可见屏幕的整个宽度。它覆盖了高度。
我已将宽度和高度分别设置为 100vw 和 100vh。 
代码如下
<body id="page-top" data-spy="scroll" >
<section id="videoplayersection">
<div id="videoplayer">
<!--
<img alt="" src="../images/b1.jpg" class="img-responsive" id="randomimg">
<h1 id="wedname">A weds B</h1> -->
<div id="playerholder" style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/287060201" style="position:absolute;top:0;left:0;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<!-- <p>
<a href="https://vimeo.com/287060201">Dolomites - a timelapse adventure</a> from <a href="https://vimeo.com/casperrolsted">Casper Rolsted</a> on <a href="https://vimeo.com">Vimeo</a>.
</p> -->
</div>
<div id="story"class="container">
<div class="row">
<div class="col-sm-12">
<div class="story-content ">
<p>
Taj and Atisha, two people from two different countries and two different cultures. Taj, West Indian and Atisha, a Sri Lankan, both brought up in England. They connected with each other through common friends at that time and found themselves to be extremely one with each other. Atisha loves her prosecco, and Taj loves barbecues. Their friends are their family, they do nothing without them. And so, they decided to have a small little destination wedding here in Goa with just their closest of the closest friends and their parents at the beautiful Stone Water Eco Resort.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- <div class="wthree_title_agile">
<p id="heartunderline"><i class="fa fa-heart-o" aria-hidden="true"></i></p>
</div> -->
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.easing.min.js"></script>
<script src="../js/jquery.scrollTo.js"></script>
<script src="../js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../js/custom.js"></script>
</body>
这是css部分
.story-content {
position: relative;
/* padding:0px 220px; */
}
.story-content p {
font-weight: 500;
font-size: 20px;
display: block;
padding-left: 8%;
padding-right: 8%;
}
#story {
margin-top: 50px;
}
#videodiv {
position: relative;
}
@media (max-width: 1200px) {
.story-content p {
padding-left: 1%;
padding-right: 1%;
}
}
@media (min-width: 1200px) {
.story-content p {
padding-left: 8%;
padding-right: 8%;
}
}
@media (max-width: 1024px) {
.story-content p {
font-size: 22px;
}
}
@media (max-width: 800px) {
.story-content p {
font-size: 20px;
}
}
@media (max-width: 550px) {
.story-content p {
font-size: 18px;
}
}
@media (min-width: 300px) and (max-width: 400px) {
.story-content p {
font-size: 25px;
}
}
@media (max-width: 1024px) {
iframe {
/* display: block; */
width: 100%;
height: 100%;
/* object-fit: cover; */
}
}
@media (max-width: 1200px) {
#playerholder {
/* position: absolute; */
width: 100%;
height: 100%;
overflow: hidden;
}
iframe {
display: block;
width: 100vw;
height: 100%;
object-fit: contain;
}
}
@media (min-width: 1201px) {
#playerholder {
width: 100%;
height: 100%;
overflow: hidden;
}
iframe {
display: block;
width: 100vw;
height: 100vh;
object-fit: contain;
}
}
我尝试将 iframe 的宽度更改为 100%；如果我这样做，什么都不会改变。
如果我将 iframe 的高度更改为 100%，宽度更改为 100vh/100%；它增加了它的高度并且不适合可见屏幕。
最佳答案
快速浏览一下，您可能想尝试将 object-fit: contain 更改为 object-fit: fill，甚至删除它。 object-fit 控制如何缩放对象以适合容器，听起来您的问题与缩放有关，因此请尝试使用这些值进行试验。如果您可以编辑原始问题以包含有关环境的更多详细信息以及您看到的确切效果，那将会很有帮助。
关于html - vimeo 嵌入式视频覆盖整个可见高度和屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52211486/