วิธีทำให้วิดีโอ youtube เป็น responsive (หรือ iframe อื่นๆ)

Share Tweet Share

เมื่อเพิ่มวิดีโอจาก Youtube ของคุณลงไปในเว็บไซต์ หรือบล็อค โดยการวาง iframe มันจะเกิดปัญหาตามมาเมื่อคุณย่อขนาดเล็กลง หรือดูบนหน้าจอมือถือ หรือ แท็บเล็ต จะทำให้ล้นจอออกมา เนื่องจาก iframe ค่าเริ่มต้นมันจะ fixed size เพราะฉนั้นเราต้องมีการดัดแปลง code เพื่อให้วิดีโอย่อลงตามหน้าจอ โดยการเพิ่ม code CSS ลงใน style sheet และ ครอบ iframe embed code นิดหน่อยคุณก็สามารถทำวิดีโอให้เป็น responsive ได้แล้ว

source: jajodia-saket.sjbn.co

Step 1 :
เพิ่ม code CSS ส่วนนี้ใน style sheet ไฟล์ของคุณ

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Step 2 :

แล้วใน iframe ของคุณด้วย  <div class="video-container"> </div>

หากคุณต้องการให้ CSS นี้มีผลทำงานเมื่อหน้าจอเท่าไหร่ให้ครอบด้วย 

@media only screen and (max-width:ขนาดหน้าจอ){...CSS CODE...}

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

 @media only screen and (max-width:768px){
 .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
 }
 
 .video-container iframe,
 .video-container object,
 .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 }
}

Share on Facebook Share on Twitter Share on Google Plus