製作兩個vimeo視頻並排，居中，並作出反應

Question

我必須Vimeo視頻，並且我試圖讓他們並排坐在身體中心，只要一臺計算機正在查看他們。然後，每當一個小屏幕（如iPhone）正在觀看它們時，我想要正確的一個落在左側下方並且適合身體的大小。

這是我到目前爲止。 HTML：

<div class="vimeo-wrapper"> 
    <div class="vimeo-video-1 vimeo-standard"> 
     <iframe src="//player.vimeo.com/video/" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen align="middle" seamless></iframe> 
    </div> 
    <div class="vimeo-video-2 vimeo-standard"> 
     <iframe src="//player.vimeo.com/video/" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen align="middle" seamless></iframe> 
    </div> 
</div> 

CSS：

.vimeo-standard { 
    width:500px; 
    height:auto; 
    position:relative; 
    margin: 10px auto; 
    float: left; 
} 
.vimeo-video-2 { 
    margin-left: 15px; 
} 
.vimeo-wrapper { 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
} 

@media (max-width:767px) { 
    .vimeo-standard { 
     position: relative; 
     padding-bottom: 56.25%; /* 16/9 ratio */ 
     padding-top: 30px; /* IE6 workaround*/ 
     height: 0; 
     overflow: hidden; 
    } 
    .vimeo-video-2 { 
     margin-left: 0; 
    } 
    .vimeo-standard iframe, .vimeo-standard object, .vimeo-standard embed { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
    } 
} 

@media (min-width:768px) and (max-width:1199px) { 
    .vimeo-standard iframe { 
     width: 352px; 
     height: 198px; 
    } 
    .vimeo-standard { 
     width: 352px; 
    } 
    .vimeo-video-2 { 
     margin-left: 10px; 
    } 
} 

我已經創造了一些響應CSS它，但我有麻煩恰到好處，使其集中，反應靈敏，並排側當它是全屏。

我應該如何更改HTML和CSS來做到這一點？

Answer 1

我編輯了你的css，它現在不那麼完全響應。我已經添加了一些額外的borders，因此您可以識別標記中每個div的邊界，您可以將其刪除。

關鍵居中容器中的項目是給position:relative和margin:0 auto

，是的，當你需要使用你需要使用clearfix一個容器內的漂浮物，使容器可以重置其height財產

Check it at fiddle

.vimeo-wrapper { 
     max-width: 980px; 
     position: relative; 
     margin: 0 auto; 
     border: 1px solid green; 
    } 

    .vimeo-standard { 
     float: left; 
     height: 300px; 
     width: 47%; 
     border: 1px solid #000; 
     margin: 10px; 
    } 

    iframe { 
     width: 100%; 
     height: 100%; 
    } 


    @media (max-width:767px) { 

     .vimeo-standard { 
      float: none; 
      width: 80%; 
      margin: 0 auto; 
      padding-bottom: 10px; 
     } 
    } 

    .clearfix:before, 
    .clearfix:after { 
     content: " "; /* 1 */ 
     display: table; /* 2 */ 
    } 

    .clearfix:after { 
     clear: both; 
    }