วิธีแก้ไขเมื่อเราใส่ youtube ในเว็บแล้วมันลอยเหนือทุกๆ element

web 2.0Wednesday, December 25, 2013 - 18:58

หลายๆ คนคงเจอปัญหาที่ว่าเมื่อเวลาเราใส่ลิงค์ iframe ของ youtube ลงไปในเว็บเราแล้วเนี้ย ตัว iframe ของ youtube มันจะการเหมือนกำหนด z-index ให้มันอยู่บนสุดตลอด ซึ่งผมใช้ drupal ก็จะรำคาญมาก เพราะเวลาที่จะเข้าในส่วนของ admin มันจะเป็น overlay lightbox ขึ้นมา แต่เจ้ากรรม youtube จะต้องมาบังการแสดงผลตลอด T.T

youtube overlay

ตัวอย่างจากภาพด้านบน ซึ่งวิธีแก้ไขปัญหานี้ก็ไม่ยาก เพียงแค่ใส่ ?wmode=transparent ไปต่อท้าย url ของ youtube ก็สามารถแก้ไขได้แล้ว เช่น

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

แต่ถ้าเราอยากให้มันใส่ให้อัตโนมัติเลยเวลาเราใส่ iframe youtube ก็ใช้ jQuery ช่วยนิดหน่อย

// fix youtube overlay
                $("iframe").each(function(){
                      var ifr_source = $(this).attr('src');
                      var wmode = "?wmode=transparent";
                      $(this).attr('src',ifr_source+wmode);
                });

แนะนำให้อ่าน

แสดงความคิดเห็น