У меня есть встроенное видео 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>
<</p>
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> -->
вот часть 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%; он увеличивает свою высоту и не умещается на видимом экране