Memasang Video Youtube Responsive di Blog - Seringkali kita melihat beberapa blog yang memasang video dari youtube ke dalam sebuah postingan, namun terlihat tidak responsive sehingga tidak bisa menyesuaikan ukuran dimensi layar kita.
Youtube sebagai situs berbagi video yang cukup populer saat ini, sebab anda diberikan keleluasaan untuk membuat channel anda sendiri. Sehingga anda bisa mengupload video, menonton video, bahkan anda juga bisa memperoleh penghasilan dari video tersebut. Baik melalui cara berjualan produk, sebagai endorse, maupun ikut gabung sebagai publisher google adsense. Namun sebelum akun anda disetujui oleh pihak google adsense, tentu ada beberapa persyaratan yang mesti anda siapkan terlebih dahulu. Agar anda bisa bergabung dan mendapatkan penghasilan dari google adsense tersebut, salahsatunya yaitu jumlah viewer kalian minimal mencapai 10.000 viewer.
Bagi anda yang ingin meningkatkan penghasilan dari google adsense, tidak ada salahnya untuk menggabungkan kedua sumber pendapatan anda yaitu dari blog dan youtube, dengan cara membuat sebuat postingan dan video (red:tutorial) yang saling berkaitan. Kemudian silahkan anda upload video terlebih dahulu dalam channel di youtube anda, setelah itu buatlah sebuah postingan dan masukkan video anda dengan cara menggunakan fitur emmbed video.
Salah satu tools yang disediakan oleh pihak youtube yaitu adanya fitur embed video yang memungkinkan anda untuk bisa menambahkan video dalam sebuah postingan blog sekaligus dapat monontonya tanpa harus ke direct situsnya. Namun dengan menggunakan fitur emmbed dalam postingan tersebut dapat berdampak buruk pada nilai SEO blog anda. Karena adanya elemen iframe serta tampilan yang tidak responsive sehingga tidak bisa menyesuaikan dimensi layar.
Oleh karena itu, kesempatan kali ini saya akan membagikan tutorial cara memasang video youtube di blog yang responsive dapat menyesuaikan besar kecilnya ukuran layar. Sehingga tidak mempengaruhi terhadap penurunan nilai SEO blog anda.
Cara Memasang Video Youtube Responsive di Blog
Cara Pertama
1. Bukalah terlebih dahulu akun blog kalian
1. Bukalah terlebih dahulu akun blog kalian
2. Masuk pada bagian Template > Edit HTML
3. Carilah kode ]]></b:skin> atau </style> dengan cara tekan Ctrl+F pada keyboard kalian untuk memudahkan pencarian
4. Tambahkan kode CSS di bawah ini, tepat berada di atas kode ]]></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} 5. Setelah itu, tambahkan kode jQuery di bawah ini, tepat di atas kode </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> 6. klik tombol Simpan Template
Cara Kedua
1. Selain cara di atas, ada juga cara lainnya yang dapat dilakukan dalam membuat embed video youtube agar terlihat responsive hanya dengan menambahkan kode CSS tepat berada di atas kode ]]></b:skin> atau </style>
/* 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}} 2. Silahkan anda sesuaikan ukuran max-height pada media query
Cara Menambahkan Video Youtube di Blog
1. Buatlah sebuah postingan terlebih dahulu yang ada kaitannya dengan video yang akan anda tambahkan pada postingan di blog anda.
2. Jika sudah, aktifkan pada mode HTML (bukan mode Compose, ingat!)
 |
| Mengaktifkan mode HTML |
3. Tambahkan kode HTML 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 dari link video youtube yang di ambil seperti berikut
 |
| Link embed video youtube |
4. Salin link embed seperti pada gambar di atas, dan tambahkan pada 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/dnIeJZ5qXb0">
</div>
</div>
</div> 5. Terakhir klik pada tombol Publikasikan
Demikianlah tadi tutorial cara memasang video youtube responsive di blog. Dengan menggunakan cara di atas, maka video dari youtube yang anda sematkan pada salah satu postingan blog anda akan terlihat responsive pada setiap ukuran layar.
EmoticonEmoticon