[html5 +jQuery + css] แบรคกราวน์วีดีโอ

posted on 26 Jan 2012 18:39 by limitblog in say directory Idea

สวัสดีวันที่ 26 มกราคม 2555


ก่อนอื่นต้องขออภัยยิ่งสำหรับท่านที่ไม่ชอบ Video Auto play ในบล็อกแบบไม่มีที่ปิดเสียง โฮ่ๆๆ

และข้าพเจ้าอีกคนหนึ่งที่ไม่ชอบเช่นกัน
แต่วันนี้เป็นกรณีศึกษาก็อย่าถือสาละกันครับว่าด้วย แบรคกราวน์แบบเต็มจอ ตัวที่ 3 แล้วครับแต่ตัวนี้เป็น เป็น video กันบ้างครับตอนแรกกะจะไปหยิบของ codecanyon ลองเข้าไปชมกันครับ มาลงแล้วแต่ ไอ้หย๋า!! มันต้องเอาไฟล์ไปฝาก host อีกนี่หว่ายุ่งยากชิปก็เลยเอาสูตรเดิมๆทำให้มันขยายโดยใช้ css แล้วหา video ตาม youtube vimeo เอาดีกว่า ไม่ต้องไปเสียเวลากำหนด code ให้ยาก

ทำตามขั้นตอนเลยนะครับ


ขั้นตอนแรกไปหา video
อันนี้คงทราบกันแล้วมั้งครับว่าไปหา video กันยังไงใน www.youtube.com

หรือถ้าไม่รู้ก็มีภาพ youtube เลือก video> shear > embed > copy


มาดูของvimeo.com

เลือก vimeo > ตรงข้างๆ video จะมี embed > autoplay > คัดลอก


พอได้ code มาแล้วจัดการมันให้ autoplay(เล่นอัตโนมัต) loop(วน)จะได้

autoplay=1&loop=1" ยกตัวอย่างของ vimeo <iframe src="http://player.vimeo.com/video/8951807?title=0&byline=0&portrait=0&// autoplay=1;loop=1" // width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> จะได้ <iframe src="http://player.vimeo.com/video/8951807?title=0&byline=0&portrait=0&autoplay=1&wmode=opaque&loop=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

ขั้นตอนที่สอง

ต่อไปจะกำหนดให้ video นี้กลายเป็น bg โดยใช้ css กำกับ โดยเราไม่ต้องไปสนใจกับพวก width height ใน iframe เพราะลบไปลบมาเดี๋ยวพัง

#bg_grid { //grid ตัวนี้ทำให้เหมือน screen โทรทัศน์ background: url(http://limitblog.exteen.com/images/bg/grid.png) repeat; z-index:-1 !important; //ให้มันอยู่ก่อน iframe (video) } !important เหตุผลที่ใส่เพราะแยกจาก z-index ของทาง iframe (css hack) iframe,#bg_grid{ // ใช้ความกว้างและสูงเท่ากัน max-width:110% // บังคับแบบไม่มีเหตุผล min-width:110%; // บังคับแบบไม่มีเหตุผล width:100%; height: 100%; position: fixed; top: 0; left: 0; z-index:-2; //ให้มันอยู่หลัง grid (ภาพ screen ด้านบน) }

แต่ปัญหามันติดที่ว่าไอ้ iframe นี่มันไม่ยอมอยู่ด้านหลัง z-index บังคับแล้วก็ไม่ยอมไปต้องควานหาอีกยอกใหญ่ (ตามตรงไม่เก่งเขียน code งง และไม่ว่างขนาดนั้น) เลยพึ่งพา พี่กู พี่กู ก็ไปเจอในเว็บนี้พอดี
Fix YouTube iFrame Overlay and Z-Index Issues ลองเข้าไปชมกันครับ ชื่อยาวเป็นกิโลแถมแปลไม่ออก แต่เห็น z-index ก็ลองดู..เออใช้ได้จริงๆ

ขั้นตอนที่สาม

$(document).ready(function() { $("iframe").each(function(){ /*นี่ๆมี iframe ด้วย*/ var ifr_source = $(this).attr('src'); var wmode = "wmode=transparent"; if(ifr_source.indexOf('?') != -2) { /*ใส่ให้มันอยู่หลังเขาเลยครับ*/ var getQString = ifr_source.split('?'); var oldString = getQString[1]; var newString = getQString[0]; $(this).attr('src',newString+'?'+wmode+'&'+oldString); } else $(this).attr('src',ifr_source+'?'+wmode); }); }); ใส่ &wmode แค่นี่ก็เรียบร้อย code iframe จะออกมา <iframe src="http://player.vimeo.com/video/8951807?title=0&byline=0&portrait=0&autoplay=1&wmode=opaque&loop=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

ขั้นตอนสุดท้าย

เราสามารถยัด code พวกนี้ใส่ไว้ได้เลยใน Theme > widgets > Top menu > Custom Code
ถ้าจะให้ดีเลือกวางตรง Bottom menu นะครับ

<!----------------z-index---------------------> <script> $(document).ready(function() { $("iframe").each(function(){ var ifr_source = $(this).attr('src'); var wmode = "wmode=transparent"; if(ifr_source.indexOf('?') != -2) { var getQString = ifr_source.split('?'); var oldString = getQString[1]; var newString = getQString[0]; $(this).attr('src',newString+'?'+wmode+'&'+oldString); } else $(this).attr('src',ifr_source+'?'+wmode); }); }); </script> <!----------------end z-index---------------------> <style> #bg_grid { background: url(http://limitblog.exteen.com/images/bg/grid.png) repeat; z-index:-1 !important; } iframe,#bg_grid{ max-width:110% min-width:110%; width:100%; height: 100%; position: fixed; top: 0; left: 0; z-index:-2; } </style> <div id="bg_grid"></div> /*grid */ <iframe src="http://player.vimeo.com/video/a8951807?title=0&byline=0&portrait=0&autoplay=1&wmode=opaque&loop=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

ตัวอย่างก็อย่างที่เห็นด้านหลังนั่นแหละครับ
ข้อแนะนำ

  • คัดลอกโค๊ด ทั้งหมดไปแก้ไขใน notepad ก่อน

  • เหมาะสำหรับธีมที่ใช้ content แบบ "โปร่งแสง" (transparent)

  • อาจสร้างความเดือดร้อนให้กับผู้ที่ไม่ชอบเสียงดังๆเวลาเว็บเข้ามาเยือน

  • ไม่เหมาะกับเน็ต 56K

  • ถ้าอยากรู้ว่า full screen จริงไหมก็กด ctrl + แล้วเลื่อนลูกกลิ้งที่เมาว์ท่านดูครับ


  • ปล. ผมเลือก video มาแบบเสียงไม่ดังแล้วครับ และ copy and past โลดดดดดด !!

    ขอให้ทุกวันของท่านเป็นวันที่มีแต่ความสุขนะครับ ถ้าชอบผมก็จะคิดลูกเล่นใหม่ๆมาให้เรื่อยๆครับ ;p

    Comment

    Comment:

    Tweet

    Our technicians can repair many hardware and software issues that can take place with Apple Ipad 1,two,3 units in addition as Android based tablets such as the Galaxy Tab, Google Nexus and other similar models. Most tablet repairs could be charged the $75 flat rate service fee that we provide that includes all labor a lot less parts. Most repairs fall into the $100 to

    #8 By http://itwoman.com.ua/index.php?subaction=userinfo&user=kopetpdbpf (193.201.224.68|193.201.224.68) on 2014-10-31 01:59

    Hot! Hot! Hot! เจ๋งเป็ด confused smile open-mounthed smile
    ช่วยแปลให้ double wink

    <!----------------z-index--------------------->
    <script>

    // เมื่อโหลดหน้าเสร็จ
    $(document).ready(function() {

    //เลือกแท็ก iframe ทั้งหมดแล้ว ทำการเลือกทีละอัน (for each)
    $("iframe").each(function(){

    // ณ iframe ที่ถูกเลือก ให้ ifr_source มีค่าทำกับ iframeที่เลือก.src
    var ifr_source = $(this).attr('src');
    var wmode = "wmode=transparent";

    //ถ้ามี Query(?) ให้แทรก "wmode=transparent" ลงไป
    //เอาแค่ -1 พอเพราะ -1 จากผลลัพย์ของฟังชั่น indexOf จาก String นั้นคือหาค่าไม่เจอนั้นเอง
    if(ifr_source.indexOf('?') != -2) {
    var getQString = ifr_source.split('?');
    var oldString = getQString[1];
    var newString = getQString[0];
    $(this).attr('src',newString+'?'+wmode+'&'+oldString);
    }
    //ถ้าไม่มีก็เอา "wmode=transparent" ต่อท้ายไปดื้อๆเลย
    else $(this).attr('src',ifr_source+'?'+wmode);
    });
    });
    //จบข่าว อ๊ะแล้วจะพิมพ์ทำไมนี้
    </script>
    <!----------------end z-index--------------------->

    ข้อควรระวังนั้นการใช้สคริปนี้คือ มันจะแก้ iframe ทุกอันในเพจนี้นะครับ confused smile

    #6 By Richter on 2012-01-28 20:48

    วิเศษสุดเหลือเกิน เหลือเกินจริงๆopen-mounthed smile double wink Hot! Hot! Hot! Hot! Hot!

    #5 By บุรุษนิรนาม on 2012-01-27 10:45

    แม้จะทำเวปได้แต่บ้างแต่อ่านโค้ดทีไรก็ปวดเฮดทุกทีsad smile

    #4 By 2521luck on 2012-01-27 07:43

    โคตรอลังการ

    #3 By blueboat on 2012-01-26 23:47

    Hot! เหนือคำบรรยาย

    #2 By D-faxtory on 2012-01-26 20:07

    สุดยอด Hot! Hot! Hot!

    #1 By AdmonToom on 2012-01-26 18:56