Question

我有一个嵌入式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&nbsp; prosecco, and Taj loves barbecues.&nbsp; 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％；它会增加其高度，而不适合可见的屏幕

Answer 1

快速浏览一下，您可能想尝试将 object-fit：contains 更改为object-fit：fill，甚至删除它。 object-fit控制如何缩放对象以适合容器，这听起来像是缩放问题，因此请尝试使用这些值。如果您可以编辑原始问题，以包括有关环境和实际效果的更多详细信息，将很有帮助。

vimeo嵌入式视频覆盖了整个可见高度和屏幕

1 个答案: