Question

我一直试图在视频中嵌入视频，并且一直很难这样做。你可以看到我到目前为止的一个例子吗？有没有更简单的方法来添加填充，边距或额外的div？

这是我的代码：

＆＃13;

div.tv-wrapper {
  position: relative;
  padding-top: 15px;
  padding-bottom: 67.5%;
  height: 0;
}

div.tv-wrapper iframe {
  box-sizing: border-box;
  background: url(http://garrandwebsite.staging.wpengine.com/wp-
 content/uploads/2017/12/TV-Background-Image.jpg) center center no-repeat;
  background-size: contain;
  padding: 6.3% 12.8% 20.7% 12.8%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="tv-wrapper"><iframe class="sproutvideo-player" src="//videos.sproutvideo.com/embed/489adcb51e1debcdc0/e0d9daac7a1a9b30?
    bigPlayButton=false&amp;showControls=false" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

最后设计了一个使用vw（view-width）而不是％来解决响应问题的解决方案。希望这可以帮助。：）

＆＃13;

.tv-wrapper {
  display: flex;
  align-items: flex-start;
  padding-top: 5%;
  padding-left:2%;
  justify-content: center;
  background-image: url("http://garrandwebsite.staging.wpengine.com/wp-content/uploads/2017/12/TV-Background-Image.jpg");
  width: 100vw;
  height: 56.5vw;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

iframe {
  height: 73%;
  width: 71%;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="tv-wrapper">
        <iframe class="sproutvideo-player" src="//videos.sproutvideo.com/embed/489adcb51e1debcdc0/e0d9daac7a1a9b30?
bigPlayButton=false&amp;showControls=false" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
      </div>
    </div>
  </div>
</div>

＆＃13;

我在将图像嵌入图像时遇到困难

1 个答案: