นายแทม ดอทคอม
 
 วันศุกร์ที่ 7 ตุลาคม 2559 เวลา 11:20 น.

CSS วิธีปรับความกว้าง คลิป YouTube ให้เต็มจอ ได้สัดส่วนตามขนาดหน้าจอมือถือ แทบเลต

พัฒนาแอพและเว็บไซต์ ›› CSS
ผู้เขียน :

คุยกับนายแทม


คำค้น :

CSS วิธีปรับความกว้าง คลิป YouTube ให้เต็มจอ ได้สัดส่วนตามขนาดหน้าจอมือถือ แทบเลต

ทำการสร้าง class ไว้ในแทค หรือ ในไฟล์ .css จำนวน 2 class ดังนี้

.container_youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

 

แล้วเรียกใช้ class ทั้ง 2 ด้านบน  โดยครอบทับแทค< iframe> ของ youtube

สัดส่วนคลิปวีดีโอที่ได้จะเป็น 16:9 แสดงผลเต็มจอ และปรับเปลี่ยนเองตามขนาดหน้าจออุปกรณ์พกพาครับ


หมวดหลัก
พัฒนาแอพและเว็บไซต์


หมวดย่อย
 
นายแทม นายแทม ดอทคอม ™ 2007 - 2018
อนุญาตให้คัดลอกเนื้อหา ยกเว้นเพื่อการค้า

 นายแทม ดอทคอม |  นายแทม ดอทคอม
 นายแทม ดอทคอม |  @naitam

โดย ห้างหุ้นส่วนสามัญ นายแทม เว็บดีไซน์
ปณจ. 26 หางดง เชียงใหม่ 50230
052-081830