Membuat Tampilan Youtube Responsive Di Blog

Membuat Tampilan Youtube Responsive di Blog - Sudah berapa usang nih update postingan disini, kali ini saya akan mencoba menciptakan tampilan youtube yang dapat kita pasang di blog semoga dapat responsive. Kenapa harus responsive? seiring berkembangan responsive di dunia internet ini kita harus mengikuti dan menyesuaikannya embed, salah satunya ialah Youtube

Sebenarnya kita hanya memodifikasi pada embed semoga tampilan yang akan terlihat dapat menyesuaikan device yang kita pakai. 

Langsung saja simak tutorialnya berikut ini :
1. Simpan Jquery pada edit HTML dan letakkan diatas arahan </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

2. simpan Kode arahan CSS di atas arahan ]]></b:skin> atau </style>

.ytbvideo{     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; } .res-video {   position: relative;   padding-bottom: 56.25%;   height: 0;   overflow: hidden;   margin:8px; } .res-video iframe {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   border:0; }

3. Simpan arahan javascrip berikut diatas arahan </body>

<script type='text/javascript'> //<![CDATA[ setTimeout(function(){ $('.ytbvideo').each(function(){ $(this).replaceWith('<iframe class="ytbvideo loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000); //]]> </script>

4. Selanjutkan kita menuju ke postingan dan masukkan kode

<div class="ytbvideo"> <div class="res-video"> <div class="ytbvideo loader" data-src="//www.youtube.com/embed/hX3XaILYM2c"></div> </div> </div>

DEMO

Semoga bermanfaat

resource: https://teritorinulled.blogspot.com/search?q=mazaa-auto-like-facebook-2014-work

Bagikan Artikel ini