Plugins Lightbox video youtube responsive cho blogger chuẩn HTML5

By Unknown

Thứ Năm, 31 tháng 7, 2014

Lightbox hay còn gọi là hiệu ứng hộp đèn, ở blogger thì hiệu ứng hộp đèn cho hình ảnh không còn xa lạ gì với các bạn, nhưng nói đến Lightbox video thì các blogger nói về vấn đề này . Ở mảng này bên Wordpress.org thì vô số plugins có hiệu ứng đẹp mắt . Bạn cứ kiểm chứng bằng từ khóa tìm kiếm trên google "Plugins Lightbox video" thì biết kết quả . Còn bên blogger bạn kiếm từ khóa liên quan đến vấn đề này củng hơi khó.

Hè hè ! không có việc gì khó chỉ sợ lòng không bền miễn sao các bạn đừng nản chí là OK . Vừng ơi, vùng ơi  hãy mở ra cụm từ khóa plugins Lightbox video youtube responsive cho blogger chuẩn HTML5 cho bạn đây nè .

Thôi không lòng vòng nữa chúng ta bắt tay vào vấn đề chính thôi nào .

Plugins Lightbox video youtube responsive cho blogger chuẩn HTML5

Đoạn CSS Responsive chuẩn CSS3 cho blogger

/* Popup video */
.videoyoutube2{text-align: center;background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:20px auto;width:80%;box-shadow: 1px 30px 30px -26px #818181;}
.video-responsive {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;margin:8px;}
.video-responsive iframe,.video-responsive object {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border:0;}
.playvideo2{padding:0;margin:30px auto;color:#aaa;cursor:pointer;transition:all .4s ease-in-out;max-width:320px;height:80px; background:#eee;border-radius:5px;padding:10px;border:1px solid #ddd;clear:both}
.play{border:6px solid #aaa;border-radius:50%;font-size:280%;line-height:70px;display:inline-block;height:70px;width:70px;text-align:center;transition:all .4s ease-in-out;}
.playvideo2:hover{background:#ddd;border:1px solid #999;}
.playvideo2:hover .play{border:6px solid #444;color:#444;}
.playvideo2:hover .playtext{color:#444;}
.playtext{font-size:280%;line-height:70px;display:inline-block;margin-left:10px;transition:all .4s ease-in-out;}
.videoyoutube2{text-align: center;background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);border-radius:5px;width:50%;box-shadow: 1px 30px 30px -26px #000;position: absolute;left:50%;margin-left:-25%;top:-1000px;z-index:9999;transition: all 0.4s ease-in-out;}
.videoyoutubeContainer2{position:fixed;left:0;right:0;bottom:0;top:0;background:transparent;background:rgba(0, 0, 0, 0.5); display:none; z-index:9999;transition: all 0.4s ease-in-out;}
.close-video2{position: absolute;top:-18px;right:-20px;color:#333;font-family:Arial;font-weight:700;border-radius:50%;background:#fff;font-size:22px;height:20px;width:20px;line-height:20px;text-align:center;cursor:pointer;}
.close-video2:hover{color:red;}

Cách chèn đoạn CSS vào template

Như thường lệ các bạn đăng nhập vào tài khoản blogger của bạn >> Mẫu  >> Chỉnh sửa HTML >> Ctrl+F >> tìm đến thẻ ]]></b:skin> và thêm đoạn CSS3 trên vào trước thẻ ]]></b:skin> sau đó lưu lại

Đoạn Javascript Lightbox video youtube chuẩn HTML5

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.videoplayer').each(function(){
$(this).replaceWith('<iframe class="videoplayer loader" src="'+$(this).data('src')+'?enablejsapi=1&version=3&playerapiid=ytplayer" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},1000);
//]]>
</script>
<script type='text/javascript'>
$(function() {
$(&#39;.playvideo2&#39;).click(function(ev){
$(&#39;.videoyoutubeContainer2&#39;).show();
$(&#39;.playvideo2&#39;).hide();
$(&#39;.videoyoutube2&#39;).css({top:&#39;15%&#39;,position:&#39;fixed&#39;});
$(&quot;.videoplayer&quot;)[0].src += &quot;&amp;autoplay=1&quot;;
ev.preventDefault();
});
$(&#39;.close-video2&#39;).click(function(){
$(&#39;.videoyoutubeContainer2&#39;).hide();
$(&#39;.playvideo2&#39;).show();
$(&#39;.videoyoutube2&#39;).css({top:&#39;-1000px&#39;,position:&#39;absolute&#39;});
$(&#39;.videoplayer&#39;)[0].contentWindow.postMessage(&#39;{&quot;event&quot;:&quot;command&quot;,&quot;func&quot;:&quot;&#39; + &#39;stopVideo&#39; + &#39;&quot;,&quot;args&quot;:&quot;&quot;}&#39;, &#39;*&#39;);
});
});
</script>
</b:if>

Cách chèn đoạn Javascript Lightbox video youtube vào template

Sau khi thay đoạn CSS xong các bạn nhấn tiếp Ctrl+F tìm đến thẻ </head> sau đó chèn đoạn Javascript trên vào trước thẻ </head> của template . Lưu lại nhấn F5 nhé .Ở đây mình có thêm thuộc tính
<b:if cond='data:blog.pageType == &quot;item&quot;'>...</b:if> mục đích là không liên quan đến trang chủ để template nhẹ hơn khi load ở trang chủ . Vậy là chưa xong đâu các bạn nhé các bạn cần thêm một đoạn HTML khi đăng bài viết có liên quan đến video của youtube nữa .

Đoạn HTML trong bài viết

<div class="playvideo2">

<span class="play">&#9658;</span><span class="playtext">Play Video</span>

    </div>

<div class="videoyoutubeContainer2"></div>

<div class="videoyoutube2">

<div class="video-responsive">

<div class="videoplayer loader" data-src="//www.youtube.com/embed/vPmLNT2PtpQ"></div>

    </div>

    <div class='close-video2' title='Close'>&#215;</div>

    </div>

www.youtube.com/embed/vPmLNT2PtpQ là video hiển thị ở bài viết,  khi viết bài các bạn nên chuyển sang HTML khi chèn code HTML trên vào bài viết nhé .

Lưu ý:

Nếu template của bạn có đoạn <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> thì xóa đi nhé tránh trùng lặp gây xung đột code vì mình đả test nhiều template. Đây là code trong template của người indonesia mình thấy hay nên chia sẻ cho bạn bè .Chúc các bạn thành công .

DEMO

Tag : Chia sẻ, CSS, HTML5