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
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>
Baca Juga
<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>
Semoga bermanfaat resource: https://teritorinulled.blogspot.com/search?q=mazaa-auto-like-facebook-2014-work