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

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

 

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

 

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

  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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การคำนวณบวก ลบ คูณ หาร ใน Microsoft Excel
โดย ณัฐกฤตา บุญญะฤทธิ์ พ 23 ม.ค. 2019 6:53 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
24
พ 23 ม.ค. 2019 6:53 pm โดย ณัฐกฤตา บุญญะฤทธิ์
javascript แปลง string เป็น number จุดทศนิยม 2 ตำแหน่ง
โดย jataz2 พ 23 ม.ค. 2019 5:56 pm บอร์ด AJAX Javascript Library - jQuery
0
7
พ 23 ม.ค. 2019 5:56 pm โดย jataz2
javascript ใส่ , ที่หลักพัน
โดย jataz2 พ 23 ม.ค. 2019 5:45 pm บอร์ด AJAX Javascript Library - jQuery
0
6
พ 23 ม.ค. 2019 5:45 pm โดย jataz2
To,Cc,Bcc ในการส่ง E-mail ต่างกันอย่างไร
โดย Chidchanok พ 23 ม.ค. 2019 5:40 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
6
พ 23 ม.ค. 2019 5:40 pm โดย Chidchanok
การสร้าง even เพื่อแสดง ณ แถบ user ใน phpbb
โดย Ittichai_chupol พ 23 ม.ค. 2019 5:27 pm บอร์ด PHP Knowledge
0
7
พ 23 ม.ค. 2019 5:27 pm โดย Ittichai_chupol
โซลชาได้ตอบชัดเจนเฟอร์กี้อยู่เบื้องหลังจริงหรือไม่
โดย pimwasineerat พ 23 ม.ค. 2019 4:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
พ 23 ม.ค. 2019 4:38 pm โดย pimwasineerat
Sets Phantom คืออะไรค่ะ หรือหมายถึงอะไร
โดย ณัฐกฤตา บุญญะฤทธิ์ พ 23 ม.ค. 2019 4:13 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
26
พ 23 ม.ค. 2019 4:13 pm โดย ณัฐกฤตา บุญญะฤทธิ์
Q - สอบถามเรื่อง ส่งค่า Django to PDF
โดย theoneozz พ 23 ม.ค. 2019 3:48 pm บอร์ด Programming - C/C++ & java & Python
0
10
พ 23 ม.ค. 2019 3:48 pm โดย theoneozz
Q - สอบ ถามเรื่อง python tkinter วิธีทำ PDF
โดย ichimarusoichi พ 23 ม.ค. 2019 3:25 pm บอร์ด Programming - C/C++ & java & Python
4
24
พ 23 ม.ค. 2019 6:57 pm โดย ichimarusoichi
จำหน่าย ปูนแดง ปูนกินหมาก ทำน้ำปูนใส ส่งทั่วประเทศ
โดย Tanadet พ 23 ม.ค. 2019 2:00 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
พ 23 ม.ค. 2019 2:00 pm โดย Tanadet
การตั้งค่าส่วนตัว ในส่วนของการระบุเพศ คุณสามารถระบุเพศของคุณด้วยวิธีนี้
โดย จันนุสรณ์ ดีแก่ พ 23 ม.ค. 2019 1:30 pm บอร์ด phpBB user Guide Knowledge
0
5
พ 23 ม.ค. 2019 1:30 pm โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] File Download Extension บล็อคในการดาวโหลด
โดย จันนุสรณ์ ดีแก่ พ 23 ม.ค. 2019 11:58 am บอร์ด phpBB 3.1 Extension Review
0
11
พ 23 ม.ค. 2019 11:58 am โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] Previous / Next topic Extension หัวข้อก่อนหน้า / ถัดไป
โดย จันนุสรณ์ ดีแก่ พ 23 ม.ค. 2019 11:25 am บอร์ด phpBB 3.1 Extension Review
0
7
พ 23 ม.ค. 2019 11:25 am โดย จันนุสรณ์ ดีแก่
เมื่อหยุดยาวแล้วมาทำงาน
โดย จันนุสรณ์ ดีแก่ พ 23 ม.ค. 2019 10:38 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
พ 23 ม.ค. 2019 10:38 am โดย จันนุสรณ์ ดีแก่
อยากทราบวิธีการล้างค่าหลังทำการอัพโหลดเสร็จ ใน phpbb
โดย Ittichai_chupol ส 12 ม.ค. 2019 10:57 am บอร์ด Programming - PHP
1
45
อ 22 ม.ค. 2019 6:10 pm โดย Ittichai_chupol
การแบ่งประเภทของกิจการตามลักษณะการดำเนินงาน
โดย Chidchanok อ 22 ม.ค. 2019 3:05 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
12
อ 22 ม.ค. 2019 3:05 pm โดย Chidchanok
การจัดทำงบกระแสเงินสด
โดย Chidchanok อ 22 ม.ค. 2019 2:05 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
15
อ 22 ม.ค. 2019 2:05 pm โดย Chidchanok
PM 2.5
โดย จันนุสรณ์ ดีแก่ อ 22 ม.ค. 2019 1:35 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
อ 22 ม.ค. 2019 1:35 pm โดย จันนุสรณ์ ดีแก่
การตั้งค่าให้เว็บบอร์ด สามารถทำการเปลี่ยนชื่อผู้ใช้ได้ สำหรับแอดมินหรือผู้ดูแลระบบ
โดย จันนุสรณ์ ดีแก่ อ 22 ม.ค. 2019 1:18 pm บอร์ด phpBB user Guide Knowledge
0
12
อ 22 ม.ค. 2019 1:18 pm โดย จันนุสรณ์ ดีแก่
การทำตัว Check Box ใน Google Sheets
โดย Chidchanok อ 22 ม.ค. 2019 12:22 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
16
อ 22 ม.ค. 2019 12:22 pm โดย Chidchanok