需要響應式iframe佈局

-2

我想要設計一個頁面，其中包含4個iframes，併爲其設置響應式佈局。下面是在桌面上運行的代碼，但在ipad上這是不正常工作。而我想要它的響應式佈局。需要響應式iframe佈局

Demo

來源

2014-04-21 ABC

小提琴鏈接http://jsfiddle.net/nilam/63meQ/ – ABC

我需要包括每個iframe的標題。我可以做到這一點，沒有相對定位。 – ABC

爲響應佈局使用CSS媒體查詢

DEMO

HTML

<div class="wrapper"> 
    <div class="h_iframe"> 
     <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> 
    </div> 
    <div class="h_iframe"> 
     <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> 
    </div> 
    <div class="h_iframe"> 
     <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> 
    </div> 
    <div class="h_iframe"> 
     <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div>

CSS

html, body { 
    height:100%; 
} 
.wrapper { 
    padding: 0 1%; 
    width:98%; 
} 
.h_iframe { 
    float:left; 
    margin:1% 2%; 
    width:46%; 
} 
iframe { 
    width:100%; 
} 
@media screen and (max-width: 768px) { 
    .wrapper { 
     margin:0 auto; 
     padding:0; 
     width:95%; 
    } 
    .h_iframe { 
     margin:0; 
     width:100%; 
    } 
}

來源

2014-04-21 06:39:31 Santy

這似乎很好的解決方案，但是當我們編輯高度時，iframe的高度不會改變。只有當我們在px中給予高度時，它纔會改變。 – ABC

而且不想以像素爲單位的高度 – ABC

在響應式佈局高度不需要添加，我從我的代碼中刪除高度並更新代碼。請檢查。 – Santy

Demo

這裏是頁面上完成響應4 iframe中。

HTML

<div class="wrapper"> 
    <div class="h_iframe1"> 
     <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 
<div class="wrapper"> 
    <div class="h_iframe2"> 
     <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 
<div class="wrapper"> 
    <div class="h_iframe3"> 
     <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 
<div class="wrapper"> 
    <div class="h_iframe4"> 
     <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div>

CSS

html, body { 
    height:100%; 
} 
.h_iframe1 iframe { 
    position:absolute; 
    top:0; 
    width:100%; 
    height:25%; 
} 
.h_iframe2 iframe { 
    position:absolute; 
    top: 25%; 
    width:100%; 
    height:25%; 
} 
.h_iframe3 iframe { 
    position:absolute; 
    bottom:25%; 
    width:100%; 
    height:25%; 
} 
.h_iframe4 iframe { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:25%; 
}

來源

2014-04-21 05:38:41 4dgaurav

-1

解釋解決方案基於在Youtube上的iframe http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

來源

2014-04-21 06:34:12 neilhem

我需要爲每個iframe包含標題。我可以做到這一點，沒有相對定位。 – ABC

需要響應式iframe佈局

回答

相關問題