Cara Terbaru Memasang Video Youtube Responsive di Blog - Arlina Design
Cara Terbaru Memasang Video Youtube Responsive di Blog - Youtube adalah sebuah situs video berbagi paling populer saat ini yang dimana sobat bisa mengupload video, menonton video, atau bisa juga untuk mendapatkan penghasilan dari youtube dengan mendaftarkan akun adsense melalui youtube.

Cara Terbaru Memasang Video Youtube Responsive di Blog

Banyak kelebihan yang ditawarkan situs youtube ini, salah satunya adalah 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 dan tampilannya pun belum responsive jika ukuran layar diperkecil.

Cara Terbaru Memasang Video Youtube Responsive di Blog

Baca juga : Cara Membuat Custom Thumbnail Youtube di Postingan

Maka dari itu di sini Arlina Design memberikan sebuah tips agar video youtube menjadi responsive dan tidak akan mengurangi nilai SEO blog sobat. Berikut cara penerapannya :

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

/* Youtube Responsive */
@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}
.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>

<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);
//]]>
</script>

3. Simpan template.

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

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

Contoh link embed video yang diambil :

Embed Youtube Video

Salin link embed seperti screenshot di atas, kemudian simpan di dalam kode HTML di atas seperti ini :

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/31k_DB8KVQM">
</div>
</div>
</div>

5. Terakhir simpan / publikasikan postingan.


Update : CSS Only


Saya mendapat ide dari komentar sobat duniavern untuk mengakali embed video youtube menjadi responsive hanya dengan CSS. Bagi yang ingin mengganti hanya dengan menambahkan CSS saja, sobat bisa pasang kode di bawah ini sebelum </head> :

<style type='text/css'>
/* CSS Only */
.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}}
</style>

Atur kembali CSS max-height dalam media query jika kurang sesuai.

Kini video youtube yang diembed di postingan sudah responsive yang berarti video bisa menyesuaikan dengan ukuran dalam layar apapun. Sekian sedikit trik tentang Cara Terbaru Memasang Video Youtube Responsive di Blog. Mudah-mudahan bermanfaat bagi sobat blogger semua. Terima kasih.

Cara Terbaru Memasang Video Youtube Responsive di Blog

Cara Terbaru Memasang Video Youtube Responsive di Blog - Youtube adalah sebuah situs video berbagi paling populer saat ini yang dimana sobat bisa mengupload video, menonton video, atau bisa juga untuk mendapatkan penghasilan dari youtube dengan mendaftarkan akun adsense melalui youtube.

Cara Terbaru Memasang Video Youtube Responsive di Blog

Banyak kelebihan yang ditawarkan situs youtube ini, salah satunya adalah 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 dan tampilannya pun belum responsive jika ukuran layar diperkecil.

Cara Terbaru Memasang Video Youtube Responsive di Blog

Baca juga : Cara Membuat Custom Thumbnail Youtube di Postingan

Maka dari itu di sini Arlina Design memberikan sebuah tips agar video youtube menjadi responsive dan tidak akan mengurangi nilai SEO blog sobat. Berikut cara penerapannya :

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

/* Youtube Responsive */
@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}
.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>

<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);
//]]>
</script>

3. Simpan template.

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

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

Contoh link embed video yang diambil :

Embed Youtube Video

Salin link embed seperti screenshot di atas, kemudian simpan di dalam kode HTML di atas seperti ini :

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/31k_DB8KVQM">
</div>
</div>
</div>

5. Terakhir simpan / publikasikan postingan.


Update : CSS Only


Saya mendapat ide dari komentar sobat duniavern untuk mengakali embed video youtube menjadi responsive hanya dengan CSS. Bagi yang ingin mengganti hanya dengan menambahkan CSS saja, sobat bisa pasang kode di bawah ini sebelum </head> :

<style type='text/css'>
/* CSS Only */
.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}}
</style>

Atur kembali CSS max-height dalam media query jika kurang sesuai.

Kini video youtube yang diembed di postingan sudah responsive yang berarti video bisa menyesuaikan dengan ukuran dalam layar apapun. Sekian sedikit trik tentang Cara Terbaru Memasang Video Youtube Responsive di Blog. Mudah-mudahan bermanfaat bagi sobat blogger semua. Terima kasih.

Related Post

Disqus Codes
  • 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

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo