Unik Sematkan Video Ala Kompi Ajaib

Unik Sematkan Video Ala Kompi Ajaib

Unik Sematkan Video Ala Kompi Ajaib

infoalya.com

Tidak ada habisnya kreativitas dari para blogger yang selalu membuat tampilan blognya semakin cantik dan terlihat rapi serta selalu berbagi ilmunya pada semua blogger pemula seperti saya . Kang Adhy salah satunya setelah mencoba trik menyematkan video di postingan blog dari kang adhy dan berhasil lantas saya ingin sekali mempostingnya disini.

dibawah ini kode yang bisa anda terapkan diblog :

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

 H T M L   letakkan dipostingan dan ganti URL embed video dengan yang anda inginkan
<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>


 JAVASCRIPT   letakkan diatas tag </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>


Artikel asli bersumber dari : kompiajaib.com/2014/07/alternative-lain-manipulasi-tampilan-video-youtube.html

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

2 Comments Add Comment

MªªªªñÑñŤŤŤªªªªªPPPP

Balas

trims cak nanang :2thumbup

monggo cak di terapkan diblognya cak

Balas
Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×