Home اضافات بلوجر بلوجر price_مجانا اضافة اداة لتشغيل الفيديو بالمدونة بأحترافية








لتجريب الاداة اضغط هنا

طريقة تركيبها سهلة 

    1. اذهب لتحرير القالب
    2. ضع الكود التالي فوق </HEAD>


<style>

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

</style>

    1. ثم اضف الكود التالي فوق </body>


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

    1. اخر شيء هو الكود التالي ضعه اينما تريد في اي مكان في القالب  او كاضافة اداة 
    2. وغير ما هو ملون فقط 
    3. اي فيديو فقط احضر اخر كود لليوتيوب مثلا 
    4. صور للتوضيح





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





By
Similiar tagsاضافات بلوجربلوجرprice_مجانا
الاشتراك في: تعليقات الرسالة (Atom)