Cara Memasang Video Youtube Responsive di Blog

 Cara 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.



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.




Maka dari itu di sini Arlina Design memberikan sebuah trik 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 */
.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 :

https://youtu.be/66mnVisQt4w<iframe width="640" height="360" src="https://www.youtube.com/embed/66mnVisQt4w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>



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="https://www.youtube.com/embed/66mnVisQt4w">
</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 :


/* 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}}


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



Result


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.

5 Comments

The Interior Designer is a plans, researches, coordinates, and manages the projects. Interior design is a multifaceted profession that includes conceptual development, space planning, site inspections, programming, research, communicating with the stakeholders of a project, construction management, and execution of the design.

Interior Designers in OMR

Reply

KISAH NYATA,..
assalamu'alaikum warrohmatullohi wabarookaatuh...
Saya irmawati,pendatang baru di Group ini ingin Berbagi Cerita dari member ke member,Ingin mengucapkan terima kasih banyak kepada MBAH JENGGOT karna berkat bantuan Number togel 4D" 5D" 6D yang MBAH berikan ternyata benar-benar tembus 4D {.3567.} dan alhamdulillah MBAH saya menang angka sebanyak Rp 370 juta dalam bentuk uang Indonesia saya menang banyak karna saya pasang angka MBAH dari 5 bandar di sini,saya tidak tau harus berbuat apa untuk membalas kebaikan MBAH,awalnya saya kurang yakin dengan angka yang MBAH berikan ternyata alhamdulillah tembus,saya menang 4D lagi dan kalau boleh saya jujur,.sudah berapa banyak peramal/dukun di internet yang saya hubungi tidak ada satupun yang tembus malahan utang-utang saya bertambah banyak tapi dengan bantuan MBAH kini kehidupan saya jauh lebih sukses dari pada sebelumnya, alhamdulillah saya ada rencana pulang kampung MBAH karna sudah 7 tahun jadi TKI/TKW tidak perna pulang ke indonesia, ini karna bantuan MBAH saya akan pulang ketemu ke dua orang tua saya itu semua berkat bantuan MBAH. saya ingatkan kepada teman2 tidak ada dukun yg bisa menangdingi kesaktian MBAH JENGGOT.,"INGAT" didunia ini tidak ada yg tidak mungkin selama lafadz "kun fa ya kun" selalu dalam genggaman Allah, maka cukuplah dengan berkata "JADILAH MAKA TERJADILAH"
SYARATNYA : ANDA HARUS SERIUS :
dalam jangka waktu 24 jam masalah anda bisa ter'atasi. jadi bagi teman-teman yg punya masalah ekonomi atau yg lain bisa minta tolong kepada MBAH JENGGOT,atau pencinta togel yang tidak pernah merasakan kemenangan 4D-5D-6D
silahkan hubungi;
MBAH JENGGOT di no ( 085-333-200-687 ) saya sudah buktikan dalam 2X putaran ini tidak perna meleset dan saya pastikan anda tidak akan kecewa dan anda jangan mudah tergiur dengan janji-janji saatnya kita perlu bukti cuma MBAH JENGGOT yang menjamin 100% kemenangan.kalau mau bukti hubungi sekarang...
dijamin 100% jebol saya sudah buktikan...sendiri....

APAKAH ANDA TERMASUK DALAM KATEGORI DI BAWAH INI !!!!
1.Dikejar-kejar hutang/Terlilit hutang
2.Selaluh kalah dalam bermain togel
3.Barang berharga anda udah habis terjual Buat judi togel
4.Dana ghaib
5.Uang Balik
6.ILMU PELET SANGAT AKURAT
7 santet
ANDA JANGAN RAGU JANGAN TAKUT, SUDAH TERBUKTI BANYAK ORANG YANG SUKSES, HUBUNGI: MBAH JENGGOT:..

Reply

Normally, windows 8.1 product key users use the generic product key to install the latest operating system version and test. After installing and testing new features on the latest OS release, if you want users to be able to install this new operating system version and replace the generic product key with the product key from Microsoft.

Reply

Great post,cI spent a lot of time researching exchanges and waiting to get verified on my account. Wish you luck for 2018
hotmail.com

Reply

Admin tidak bertanggung jawab atas semua isi komentar ,Mohon dipahami semua isi komentar dengan bijak