如何讓你管視頻響應？

我有一個包裹你管視頻。如何讓你管視頻響應？

<div class="featured_video_plus"> 
    <iframe width="730" height="435" frameborder="0" id="fvpyt234171" type="text/html" src="youtubesourcefile"></iframe> 
</div>

當我把下面的CSS代碼，這個你管視頻是響應。

/*** You tube video ***/ 
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;} 
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

但是當包裝紙在另一個DIV中時它不響應。我有這樣的代碼也有的地方：

<div class="utube-wrapper" style="width: 730px; margin: 0px 33px 32px 0px; float: left;"> 
    <!-- Featured Video Plus v1.9--> 
    <div class="featured_video_plus"> 
     <iframe width="730" height="435" frameborder="0" id="fvpyt233458" type="text/html" src="youtubesourcefile"></iframe> 
    </div> 
</div>

我怎樣才能使這個你管的視頻響應時，它是在div utube-wrapper也？

我試過下面的代碼也..但不工作。

/*** You tube video ***/ 
.featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;} 
.featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.utube-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;} 
.utube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

來源

2015-07-13 Foolish Coder

只要取出 - >寬度730px和從UTUBE-包裝左浮動

來源

2015-07-13 06:48:18

一種可能的解決方案：

// CSS & HTML

.center-block-horiz { 
    margin-left: auto; 
    margin-right: auto; 
} 
.border-5px-inset-4f4f4f { 
    border: 5px inset #4f4f4f; 
} 
.set-padding { 
    padding: 30px; 
} 

.responsive-wrapper { 
    position: relative; 
    height: 0; /* gets height from padding-bottom */ 
    /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS: 
    -webkit-overflow-scrolling: touch; overflow: auto; */ 
} 

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

#Iframe-Maison-Willem-Tell { 
    max-width: 80%; 
    max-height: 300px; 
    overflow: hidden; 
} 

/* padding-bottom = h/w as % -- set aspect ratio */ 
.responsive-wrapper-wxh-600x480 { 
    padding-bottom: 80%; 
} 


<!-- embed responsive iframe --> 
<div class="set-padding border-5px-inset-4f4f4f"> 
<div id="Iframe-Maison-Willem-Tell" 
    class="border-5px-inset-4f4f4f center-block-horiz"> 
    <div class="responsive-wrapper 
    responsive-wrapper-wxh-600x480" 
    style="-webkit-overflow-scrolling: touch; overflow: auto;"> 
<!-- style overflow and overflow-scrolling inline because not 
    stable in CSS --> 
    <iframe src="http://maisonwillemtell.be"> 
     <p style="font-size: 110%;"><em><strong>IFRAME: </strong> 
There is iframe content being displayed 
here but your browser version does not support iframes. </em> 
Please update your browser to its most recent version 
and try again.</p> 
    </iframe> 
    </div> 
</div> 
</div>

結果可以是見於筆Responsive Iframe - Base Code。

標記和CSS及其背後的基本原理取自How to Make Responsive Iframes — it’s easy!和Scaling iframes for responsive design CSS-only。

一個突出的一點是從標籤去除所有造型。樣式僅限於CSS，溢出滾動和溢出除外，其格式爲<div>，包裝爲。另一點是設置寬度和高度設置最大寬度和最大高度在<div>圍繞.responsive包裝。

最外面的<div>是沒有必要的;它只是在那裏顯示填充和邊框的效果。

要定位iframe左側，您可以使用彈性框而不是浮動框。

來源

2015-07-16 02:33:11 alxfyv

如何讓你管視頻響應？

回答

相關問題