Sitenizde Youtube Videolarını Lightbox içinde Kullanın

Sitenizdeki youtube videolarını  embed kodu ekliyerek normal bir görüntü eklemek yerine sitenize görsellik katmak için hemde videoları bu şekilde daha iyi izliyebilmeleri için Lightbox eklentisi kullanarak  yayınlayın bu şekilde daha iyi ve profosyonel bir görüntü sağlamış olursunuz.

Eklentinin kullanımı çok basittir tabiki öncelikle lightbox eklentisinin kodlarını sitemize ekliyelim bunun için blogger şablonumuzu açıp ]]></b:skin> bu kodu buluyoruz ve altına css kodlarımı ekliyoruz.

.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;}

Yine aynı şekilde bu sefer javascript konudu ekliyices bu sefer </head> bu kodu bulup aşağıdaki kodları hemen üstüne ekliyoruz.

<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() {
    $('.playvideo2').click(function(ev){
    $('.videoyoutubeContainer2').show();
    $('.playvideo2').hide();
    $('.videoyoutube2').css({top:'15%',position:'fixed'});
        $(".videoplayer")[0].src += "&amp;autoplay=1";
        ev.preventDefault();
});
    $('.close-video2').click(function(){
       $('.videoyoutubeContainer2').hide();
        $('.playvideo2').show();
        $('.videoyoutube2').css({top:'-1000px',position:'absolute'});
        $('.videoplayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    });
});
</script>

Son işlem ise konu ekliyeceğimiz zaman ekleyiceğimiz kod.

<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/fcr2VSNf7LI"></div>
    </div>
    <div class='close-video2' title='Close'>&#215;</div>
    </div>

ÖRNEK DEMO

►Play Video

×

Continue Reading