[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://uc.exteenblog.com/limitblog/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 นะครับ

<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>  <style> #bg_grid { background: url(http://uc.exteenblog.com/limitblog/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

Tags: css, fullscreen, html5, idea, jquery7 Comments

สุดยอด

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

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

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

โคตรอลังการ

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

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

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

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

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

ช่วยแปลให้ double wink

<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>


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