Iklan

Cara Pasang Video Youtube Responsive di Blog

Cara Pasang Video Youtube Responsive di Blog

Artikel ini saya buat karena saya memiliki pengalaman kurang baik ketika menyertakan script video youtube di Blog yang saya anggap kurang responsive. Script saya ambil dari fitur embed video yang bisa sobat tambahkan dan dapat ditonton langsung di blog. Namun dengan menambahkan video tersebut akan mengurangi nilai SEO sebuah blog karena adanya elemen iframe yang membuat tampilannya pun belum responsive jika ukuran layar diperkecil. Script bermanfaat ini saya dapat dari Mbak Arlina Fitriyani yang cantik dan seorang ahli desain Web ternama Indonesia.


Cara Membuat Video Youtube Menjadi Responsive di Blog

Berikut cara penerapannya :

1. Buka Blogger >> Template >> Edit HTML >> Tambahkan kode di bawah ini
sebelum ]]></b:skin> atau </style>


BLOGGINGPASURUAN - CSS

/* Responsive Youtube for blogger  */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}


2. Tambahkan kode di bawah ini sebelum </body>


BLOGGINGPASURUAN - HTML/Java Script

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


3. Simpan template.

4. Selanjutnya untuk menambahkan video pada postingan, gunakan kode di bawah ini


BLOGGINGPASURUAN - HTML

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="MASUKKAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>


Berikut ini cara mengambil dan masukkan Link YouTube 

Cara Pasang Video Youtube Responsive di Blog


5. Terakhir simpan / publikasikan postingan.



Cara Agar Youtube Tampil Responsive di Blog dengan CSS

Masukkan kode dibawah ini di atas kode ]]></b:skin> atau </style>


BLOGGINGPASURUAN - CSS

/* CSS for YouTube Resposive Video on Blogger*/
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}


Anda bisa mengatur sendiri CSS max-height dalam media query jika kurang sesuai.

Video youtube yang Anda pasang di postingan sudah responsive yang berarti video bisa menyesuaikan dengan ukuran dalam layar apapun. Semoga bermanfaat…

Next
Prev Post
Previous
Next Post

1 comment:

  1. You have provided an nice article, Thank you very much for this one. And i hope this will be useful for many people.. and i am waiting for your next post keep on updating these kinds of knowledgeable things...
    Regards,
    Karthick,
    http://xplorant.com/

    ReplyDelete