想把YOUTUBE影片弄成可以設定大小(電腦網頁版),又能自適應手機版(自動適合手機大小)

請問大大們,我想把YOUTUBE影片弄成可以設定大小(電腦網頁版),又能自適應手機版(自動適合手機大小)

搜尋到有網站教學是貼以下的CSS樣式

.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%;

}


然後再貼

< div class=video-container>

< iframe width="640" height="360" src="https://www.youtube.com/embed/mMKonMlPy0k" frameborder="0" allowfullscreen>



< /div>

就完成了

但是我貼樣式的時候 DREAMWERVER 提示我第一行有錯誤,這一行.video-container

請問我到底是哪裡出錯

另問一下那段CSS的樣式 頭尾是嗎?

再請問如果這些寫完,影片置中要加什麼語法?
< div class=video-container>
改成
< div class="video-container">


如果是我的話會用 bootstrap 來做
這樣比較符合業界習慣
文章分享
評分
評分
複製連結

今日熱門文章 網友點擊推薦!