ทำ Youtube ให้ Responsive บน Blogger
1. ค้นหาโค้ด ]]></b:skin>
2. วางโค้ดนี้ข้างบน แล้วบันทึกหรือ Save
.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%;
}
3. เอาโค้ดแบบฝังมาจาก youtube (Embed)
ตัวอย่าง
<iframe width="560" height="315" src="https://www.youtube.com/embed/CSnIH3MtVpQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
4. วางโค้ดนี้ครอบ Embed หรือ iframe
<div class="video-container">ตรงนี้วาง Embed หรือ iframe</div>
ที่มา : http://ssuwannasri.blogspot.com/2014/11/youtube-embed-responsive-window-in.html
2. วางโค้ดนี้ข้างบน แล้วบันทึกหรือ Save
.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%;
}
3. เอาโค้ดแบบฝังมาจาก youtube (Embed)
ตัวอย่าง
<iframe width="560" height="315" src="https://www.youtube.com/embed/CSnIH3MtVpQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
4. วางโค้ดนี้ครอบ Embed หรือ iframe
<div class="video-container">ตรงนี้วาง Embed หรือ iframe</div>
ที่มา : http://ssuwannasri.blogspot.com/2014/11/youtube-embed-responsive-window-in.html