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
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.
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...
ReplyDeleteRegards,
Karthick,
http://xplorant.com/