การทำวีดีโอให้ย่อตามขนาดของหน้าจอ

 

          ในหน้าเว็บกรณีที่เราใส่วีดีโอไปในหน้าเว็บของเราก็มันกจะเจอปัญหาในกรณีที่วีดีโอไม่ย่อตามขนาดของหน้าจอโดยมีวิธีการทำให้วีดีโอสามารถย่อตามขนาดของหน้าจอได้ สามารถทำได้ดังนี้

 

วิธีทำให้วีดีโอย่อตามขนาดของหน้าจอ

  1. เพิ่ม<meta> ลงในแท็ก <head> ดังโค้ด
    <meta name="viewport" charset="utf-8" content="width-davice-width, initial-scale=1" />​
  2. เพิ่ม css เข้าไปในแท็ก <head> ดังโค้ด
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>​
  3. ในแท็ก <body> เพิ่มโค้ดวีดีโอ
    <iframe width="560" height="315" src="https://www.youtube.com/embed/tbj7gkpDjtM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>​
  4. รวมโค้ดได้ดังนี้
    <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>​
  5. ผลลัพธ์ที่ได้
    การทำให้วีดีโอย่อตามขนาดของหน้าจอ
    ทำวีดีโอให้รองรับขนาดหน้าจอมือถือ

 

การทำให้วีดีโอย่อตามขนาดของหน้าจอ
ทำวีดีโอให้รองรับขนาดหน้าจอแท็ปเล็ต

 

          ในการทำให้วีดีโอย่อตามขนาดของหน้าจอสามารถนำไปดัดแปลงใช่งานกับเว็บไซต์ที่รองรับทุกอุปกรณ์ได้โดยวีดีโอเราสามารถไปเอามาได้จากใน Youtube ได้

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : css

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
โดย witsarutt000 พฤ 14 มี.ค. 2024 4:07 pm บอร์ด SQL Knowledge
1
289
พฤ 14 มี.ค. 2024 5:44 pm โดย Sirayu View Topic SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
โดย witsarutt000 พฤ 14 มี.ค. 2024 11:17 am บอร์ด PHP Knowledge
0
180
พฤ 14 มี.ค. 2024 11:17 am โดย witsarutt000 View Topic PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
โดย Thanavat_n พ 13 มี.ค. 2024 11:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
416
พ 13 มี.ค. 2024 1:34 pm โดย Thanavat_n View Topic ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
โดย @Foretoday อ 12 มี.ค. 2024 1:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
226
อ 12 มี.ค. 2024 1:46 pm โดย @Foretoday View Topic ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
โดย witsarutt000 จ 11 มี.ค. 2024 6:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
177
จ 11 มี.ค. 2024 6:14 pm โดย witsarutt000 View Topic แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
โดย mindphp อ 10 มี.ค. 2024 4:36 am บอร์ด Linux - Web Server
0
272
อ 10 มี.ค. 2024 4:36 am โดย mindphp View Topic ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
IP และ vpn (VMware)
โดย ballmykids อ 10 มี.ค. 2024 2:35 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
230
จ 11 มี.ค. 2024 3:19 pm โดย ballmykids View Topic IP และ vpn (VMware)
แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว
โดย Anonymous ศ 08 มี.ค. 2024 7:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
190
ศ 08 มี.ค. 2024 8:12 pm โดย mindphp View Topic แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว