ให้เรตสมาชิก: 0 / 5

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

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

 

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

 

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

  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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - วิธีแก้ไข้ error จากการสร้าง extension เพื่อให้แสดง module ที่แถบเมนู ใน PHPBB
โดย Ittichai_chupol พฤ 18 ต.ค. 2018 7:27 pm บอร์ด Programming - PHP
0
4
พฤ 18 ต.ค. 2018 7:27 pm โดย Ittichai_chupol
มาดูปัญหาจอคอมที่แผนกไอทีต้องเจอ
โดย tai14 พฤ 18 ต.ค. 2018 6:15 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
พฤ 18 ต.ค. 2018 6:15 pm โดย tai14
VDO - รีวิว Module product labels (โมดูล โปรดักส์ เลเบลส์) สำหรับแสดงสินค้าที่ติดป้ายกำกับ
โดย pprn พฤ 18 ต.ค. 2018 5:59 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
พฤ 18 ต.ค. 2018 5:59 pm โดย pprn
งานประจำวันที่ 18 ตุลาคม 2561
โดย pprn พฤ 18 ต.ค. 2018 10:11 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
4
พฤ 18 ต.ค. 2018 7:12 pm โดย pprn
งานประจำวันที่ 18 ตุลาคม 2561
โดย Ittichai_chupol พฤ 18 ต.ค. 2018 10:08 am บอร์ด M070 - อิทธิชัย ชูผล
1
2
พฤ 18 ต.ค. 2018 7:33 pm โดย Ittichai_chupol
งานประจำวันที่ 18 ตุลาคม 2561
โดย tai14 พฤ 18 ต.ค. 2018 10:04 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
5
พฤ 18 ต.ค. 2018 7:27 pm โดย tai14
VDO - วิธีการแปลงไฟล์ไพธอนเป็นไฟล์ .exe
โดย prakon พฤ 18 ต.ค. 2018 10:04 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
7
พฤ 18 ต.ค. 2018 10:04 am โดย prakon
งานประจำวันที่ 18 ตุลาคม 2561
โดย prakon พฤ 18 ต.ค. 2018 10:00 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
8
พฤ 18 ต.ค. 2018 7:18 pm โดย prakon
งานประจำวันที่ 18 ตุลาคม 2561
โดย nice_13 พฤ 18 ต.ค. 2018 9:55 am บอร์ด M071 - พิชญ์สินี คงจร
2
7
พฤ 18 ต.ค. 2018 7:08 pm โดย nice_13
เเนะนำเรียนต่อต่างประเทศ
โดย Anonymous พ 17 ต.ค. 2018 10:09 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 17 ต.ค. 2018 10:09 pm โดย บุคคลทั่วไป
Q - สอบถามวิธีการเแปลงไฟล์ Python เป็นไฟล์ .exe ครับ
โดย prakon พ 17 ต.ค. 2018 7:37 pm บอร์ด Programming - C/C++ & java & Python
1
21
พฤ 18 ต.ค. 2018 7:32 pm โดย tatiya
VDO - รีวิว Module Manufacturer สำหรับแสดงผู้ผลิตสินค้า
โดย pprn พ 17 ต.ค. 2018 6:55 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
6
พ 17 ต.ค. 2018 6:55 pm โดย pprn
R - mdsoft_translate_posts ปรับเปลี่ยนแทมเพลตและภาษา
โดย Ittichai_chupol พ 17 ต.ค. 2018 6:34 pm บอร์ด ThaiVI - Developer
0
13
พ 17 ต.ค. 2018 6:34 pm โดย Ittichai_chupol
VDO - รีวิว Module Bestseller (โมดูล เบสต์เซลเลอร์) สำหรับแสดงสินค้าขายดี
โดย pprn พ 17 ต.ค. 2018 6:29 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
7
พ 17 ต.ค. 2018 6:29 pm โดย pprn
R - mdsoft_show_member_post การแสดงข้อมูลของสมาชิก
โดย Ittichai_chupol พ 17 ต.ค. 2018 6:27 pm บอร์ด ThaiVI - Developer
1
12
พฤ 18 ต.ค. 2018 6:04 pm โดย mindphp
VDO - รีวิว Module currency (โมดูล เคอเร็นซิ) สำหรับเลือกสกุลเงินของสินค้า
โดย pprn พ 17 ต.ค. 2018 5:43 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
5
พ 17 ต.ค. 2018 5:43 pm โดย pprn
VDO - รีวิว Module Latest products (โมดูล เลทเอ็ซท์ โปรดักส์) สำหรับแสดงสินค้าล่าสุด
โดย pprn พ 17 ต.ค. 2018 4:49 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
6
พ 17 ต.ค. 2018 4:49 pm โดย pprn
เมื่อหัดเขียนเว็บไซต์ครั้งแรก
โดย tai14 พ 17 ต.ค. 2018 4:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
19
พ 17 ต.ค. 2018 4:39 pm โดย tai14
B - สรุป Review เว็บไซต์ zirishoes.com
โดย tsukasaz พ 17 ต.ค. 2018 12:14 pm บอร์ด สิริกิตติรัตน์ - Tester
2
19
พฤ 18 ต.ค. 2018 1:12 pm โดย Parichat
ขออนุญาตสอบถามครับ ผมมือใหม่
โดย 9kitti พ 17 ต.ค. 2018 11:25 am บอร์ด Programming - PHP
1
15
พ 17 ต.ค. 2018 12:18 pm โดย thatsawan