การทำวีดีโอให้ย่อตามขนาดของหน้าจอ
ในหน้าเว็บกรณีที่เราใส่วีดีโอไปในหน้าเว็บของเราก็มันกจะเจอปัญหาในกรณีที่วีดีโอไม่ย่อตามขนาดของหน้าจอโดยมีวิธีการทำให้วีดีโอสามารถย่อตามขนาดของหน้าจอได้ สามารถทำได้ดังนี้
วิธีทำให้วีดีโอย่อตามขนาดของหน้าจอ
- เพิ่ม<meta> ลงในแท็ก <head> ดังโค้ด
<meta name="viewport" charset="utf-8" content="width-davice-width, initial-scale=1" />
- เพิ่ม css เข้าไปในแท็ก <head> ดังโค้ด
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
- ในแท็ก <body> เพิ่มโค้ดวีดีโอ
<iframe width="560" height="315" src="https://www.youtube.com/embed/tbj7gkpDjtM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
- รวมโค้ดได้ดังนี้
<html> <head> <meta name="viewport" charset="utf-8" content="width-davice-width, initial-scale=1" /> <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container-fluid "> <div class="col-12"> <iframe width="560" height="315" src="https://www.youtube.com/embed/tbj7gkpDjtM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> </body> </html>
- ผลลัพธ์ที่ได้
ในการทำให้วีดีโอย่อตามขนาดของหน้าจอสามารถนำไปดัดแปลงใช่งานกับเว็บไซต์ที่รองรับทุกอุปกรณ์ได้โดยวีดีโอเราสามารถไปเอามาได้จากใน Youtube ได้