Question

我想在固定宽度的div中制作响应式嵌入式iframe youtube视频

OR

将视频放在屏幕中央，适用于宽度为750像素，高度为350像素的桌面。

在任何情况下，视频都应居中，并且应该对移动设备做出响应。

提前感谢您的帮助。

Answer 1

Try this:

Css

.video-container {
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%;
}

.video-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}

Html

<div class="video-container">
    <iframe src="https://www.youtube.com/embed/zdOmNiXvM3w?rel=0" allow="autoplay; encrypted-media" allowfullscreen="allowfullscreen" width="640" height="480" frameborder="0">
    </iframe>
</div>

http://jsfiddle.net/80egz2aL/2/

Answer 2

CSS

  @media (max-width: 950px)
{
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
   /* .video-wrapper {
        width: 640px;
        float:none;
        margin-left:auto;
        margin-right:auto;
        max-width: 100%;
    }*/
}
@media (min-width: 950px) {
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 950px;
        height: 350px;
    }
   .video-wrapper {
      width: 950px;
       height: 350px;
        float:none;
        margin-left:auto;
        margin-right:auto;
        max-width: 100%;
    }

}

HTML

<div class="video-wrapper">
<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/5xxK8f7qe5A" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

    </iframe>
</div>

Answer 3

我在CSS中使用了以下代码：

    @media (max-width: 950px)
        { 
    .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;
}
            }

HTML中的内容

<div class="col-xs-12 video-responsive" align="center" style="align-content: center; margin: 0px;"><iframe src="VIDEO URL" width="750" height="350" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>

      <br clear="all">

视频在计算机上以指定的尺寸（750x350px）播放，并且在较小的设备（智能手机，平板电脑等）上具有完全响应。

谢谢！：）

PS：当您嵌入Vimeo视频或任何其他内容时，此方法也适用。

在固定宽度DIV内响应youtube视频

3 个答案: