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

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

 

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

 

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

  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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การจัดการชนิดไฟล์ บนเว็บบอร์ด phpBB แอดมิน และ Moderatorเท่านั้น ที่เป็นผู้ตั้งค่าในส่วนนี้ได้
โดย จันนุสรณ์ ดีแก่ ศ 22 ก.พ. 2019 9:30 am บอร์ด phpBB user Guide Knowledge
0
1
ศ 22 ก.พ. 2019 9:30 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 22 กุมภาพันธ์ 2562
โดย Four ศ 22 ก.พ. 2019 9:05 am บอร์ด M077 - อิษยา งามสอาด
0
1
ศ 22 ก.พ. 2019 9:05 am โดย Four
ชีวิตต้นเดือน ปลายเดือน
โดย จันนุสรณ์ ดีแก่ พฤ 21 ก.พ. 2019 6:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
พฤ 21 ก.พ. 2019 6:52 pm โดย จันนุสรณ์ ดีแก่
ขอโค้ดโปรแกรมโปรแกรมคำนวณเวลาที่ใช้ในการวิ่ง สำหรับ CodeBlockหน่อยครับ
โดย Anonymous พฤ 21 ก.พ. 2019 6:27 pm บอร์ด Programming - PHP
0
6
พฤ 21 ก.พ. 2019 6:27 pm โดย บุคคลทั่วไป
Features Review : Components MDBridge untuk menyambung data pengguna antara Joomla dan PHPbb Webboard
โดย abdkode พฤ 21 ก.พ. 2019 6:04 pm บอร์ด Bahasa Language
0
6
พฤ 21 ก.พ. 2019 6:04 pm โดย abdkode
Q - ปรับแก้โค้ดที่ Export ข้อมูลมาเป็น CSV อย่างไรค่ะ
โดย Parichat พฤ 21 ก.พ. 2019 5:01 pm บอร์ด Joomla Dev
0
1
พฤ 21 ก.พ. 2019 5:01 pm โดย Parichat
Q - ขอวิธีปรับแก้โค้ดที่ Export ข้อมูลมาเป็น Excel อย่างไรค่ะ
โดย Parichat พฤ 21 ก.พ. 2019 4:59 pm บอร์ด Joomla Dev
0
1
พฤ 21 ก.พ. 2019 4:59 pm โดย Parichat
Q - แก้ไขโค้ดที่ดึงข้อมูลมาเป็น PDF อย่างไรค่ะ
โดย Parichat พฤ 21 ก.พ. 2019 4:55 pm บอร์ด Joomla Dev
0
1
พฤ 21 ก.พ. 2019 4:55 pm โดย Parichat
Features Review : MDEvents untuk mengurus pelbagai jadual data aktiviti
โดย abdkode พฤ 21 ก.พ. 2019 4:51 pm บอร์ด Bahasa Language
0
7
พฤ 21 ก.พ. 2019 4:51 pm โดย abdkode
Features Review : Component MJUpgrade untuk menaik taraf Joomla 1.5 ke Joomla 2.5, 3.X
โดย abdkode พฤ 21 ก.พ. 2019 4:10 pm บอร์ด Bahasa Language
0
7
พฤ 21 ก.พ. 2019 4:10 pm โดย abdkode
Features Review : Mod Mslideshows untuk memaparkan gambar, video Youtube dari kandungan
โดย abdkode พฤ 21 ก.พ. 2019 3:29 pm บอร์ด Bahasa Language
0
3
พฤ 21 ก.พ. 2019 3:29 pm โดย abdkode
Plugin Editors XTD Multicontent 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:28 pm บอร์ด korean Language - 한국어
0
7
พฤ 21 ก.พ. 2019 12:28 pm โดย wipaporn
Module M Slideshows 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:27 pm บอร์ด korean Language - 한국어
0
7
พฤ 21 ก.พ. 2019 12:27 pm โดย wipaporn
Component M Multisite Master 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:27 pm บอร์ด korean Language - 한국어
0
4
พฤ 21 ก.พ. 2019 12:27 pm โดย wipaporn
Component M Multisite Client 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:27 pm บอร์ด korean Language - 한국어
0
4
พฤ 21 ก.พ. 2019 12:27 pm โดย wipaporn
MDFiles Featured 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:26 pm บอร์ด korean Language - 한국어
0
4
พฤ 21 ก.พ. 2019 12:26 pm โดย wipaporn
Module MDFiles Popular 사용 지침과 설명
โดย wipaporn พฤ 21 ก.พ. 2019 12:25 pm บอร์ด korean Language - 한국어
0
12
พฤ 21 ก.พ. 2019 12:25 pm โดย wipaporn
Q - ต้องการซ่อนบ็อก Next step ในฟอร์มที่ยังกรอกข้อมูลยังไม่ครบทุกหน้า
โดย Parichat พฤ 21 ก.พ. 2019 11:54 am บอร์ด Joomla Dev
0
1
พฤ 21 ก.พ. 2019 11:54 am โดย Parichat
การล็อคหัวข้อ คืออะไร ทำความรู้จักกับเครื่องมือในการล็อคหัวข้อ สำหรับผู้ดูแลระบบ
โดย จันนุสรณ์ ดีแก่ พฤ 21 ก.พ. 2019 10:38 am บอร์ด phpBB user Guide Knowledge
0
6
พฤ 21 ก.พ. 2019 10:38 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 21 กุมภาพันธ์ 2562
โดย Four พฤ 21 ก.พ. 2019 10:23 am บอร์ด M077 - อิษยา งามสอาด
1
7
พฤ 21 ก.พ. 2019 9:40 pm โดย Four