Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 324195

    累積人氣

  • 59

    今日人氣

    0

    訂閱人氣

Youtube 影片嵌入也來自適應一下 (Responsive Youtube Embed)

How it works?

這個修補方式需要在 youtube 提供的嵌入碼外面再包一層 div

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

HTML部分
<div class="video-container">
    <iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/wrrO7FQtDgM" width="480"></iframe>
</div>

這樣就完成了,在不同解析度的瀏覽器或是 Mobile 裝置都可以獲得良好的效果 :D

資料來源: Web Designer Wall
相簿設定
標籤設定
相簿狀態