Cara Terbaru Memasang Video Youtube Responsive Di Blog

Cara Terbaru Memasang Video Youtube Responsive di Blog - Youtube yaitu sebuah situs video mengembangkan paling terkenal ketika ini yang dimana teman sanggup mengupload video, menonton video, atau sanggup juga untuk mendapat penghasilan dari youtube dengan mendaftarkan akun adsense melalui youtube.

Banyak kelebihan yang ditawarkan situs youtube ini, salah satunya yaitu fitur embed video yang sanggup teman tambahkan dan sanggup ditonton pribadi di blog. Namun dengan menambahkan video tersebut akan mengurangi nilai SEO sebuah blog alasannya yaitu adanya elemen iframe dan tampilannya pun belum responsive kalau ukuran layar diperkecil.

Baca juga : Cara Membuat Custom Thumbnail Youtube di Postingan

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

1. Buka Blogger > Template > Edit HTML > Tambahkan instruksi 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 instruksi 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 instruksi 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 :

Salin link embed menyerupai screenshot di atas, kemudian simpan di dalam instruksi HTML di atas menyerupai 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.

Result

Update : CSS Only

Saya mendapat pandangan gres dari komentar teman duniavern untuk mengakali embed video youtube menjadi responsive hanya dengan CSS. Bagi yang ingin mengganti hanya dengan menambahkan CSS saja, teman sanggup pasang instruksi 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 kalau kurang sesuai.

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

Tweet

Subscribe to receive free email updates: