2019年4月9日 星期二

如何將youtube影片放在部落格後變成嵌入RWD(自適應網頁)的影片

1到Blogger後台/主題/自訂


語法如下:
.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%;}
2:開啟一篇新文章將youtube所提供的「複制嵌入程式碼」
例如
<iframe width="400" height="225" src="https://www.youtube.com/embed/YoGHwlDz6Ow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
更改如下:
<div class="video-container">
<iframe width="400" height="225" src="https://www.youtube.com/embed/YoGHwlDz6Ow" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
到文章的HTML來修改
以上操作是參考自以下網址
https://www.webdesigns.com.tw/youtube-rwd.asp
舉一個影片例子如下


沒有留言:

張貼留言