Kadang kita menambahkan video di tulisan blog kita dan biasanya dari YouTube. Video tersebut untuk bahan tutorial atau referensi tambahan. Karena Blogger dan YouTube sama-sama berada di bawah Google, tentu sudah ada fitur embed yang disediakan.
Ketika kita melihat video YouTube pada postingan kita di browser komputer atau laptop, videonya baik-baik saja saat diputar dan tak tampak ada masalah. Namun, masalahnya muncul ketika kita membukanya pada perangkat smartphone, ukuran videonya terlalu lebar dan tak tampak di layar kita karena terpotong. Ketaksesuaian ukuran perangkat ponsel yang memuatnya inilah yang disebut sebagai tak responsive dan tak mobile-friendly.
Terus bagaimana sih agar video tersebut responsive mengikuti ukuran perangkatnya? Nah, berikut tutorial tentang cara agar video YouTube di postingan blog menjadi lebih responsive dan mobile-friendly.
Tutorial kali ini akan menggunakan script CSS dengan menyematkannya ke dalam template Blogger. Sekaligus agar pengkodean video YouTube kita lebih ramah SEO.
Tutorial Agar Video Youtube di Blogger Lebih Responsive dan Mobile-Friendly
- Masuk ke dashboard Blogger lalu pilih Tema dan pilih bagian Edit HTML
- Masukan Script CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>. Untuk memudahkan cari script tadi dengan CTRL + F.
/* Youtube Responsive */
.embedded-video-large{
background-color: #000;
background-position: center;
background-size: cover;
cursor: pointer;
display: inline-block;
width: 400px; height: 230px;
max-width: 100%; overflow: hidden; position: relative}
.videoyoutube{text-align: center; margin: 20px auto; width:80%;}
.video-responsive{position: relative; padding-bottom: 56.25%; overflow: hidden; margin: 8px}
.video-responsive iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0}
@media screen and (max-width: 400px){.videoyoutube{width: 100%} }
Langkah selanjutnya pasang Video Youtube di postingan blog seperti biasa. Selanjutnya masih ada tutorial agar penyematan video YouTube kita lebih ramah SEO.
Ganti Kode iframe Agar Lebih SEO-Friendly
1. Masuk ke postingan artikel – pilih Mode HTML dan pastekan script dibawah ini.
<div class=”videoyoutube”>
<div class=”video-responsive”>
<iframe allowfullscreen=”1″ class=”embedded-video-large” frameborder=”0″ src=”https://www.youtube.com/embed/XXXXXXX?rel=0″></iframe></div>
</div>
2. Ganti kode XXXXXXX diatas dengan kode embed video youtube yang akan dimuat.
Liat preview postingan apakah sudah sesuai lalu publikasikan.
Keterangan:
- Kode rel=0 fungsinya agar di akhir video tidak ditampilkan video terkait, biasanya ada 50 video terkait dan jika di klik maka akan langsung di putar di YouTube, bukan di blog Anda.
- Kode allowfullscreen=”1″ fungsinya untuk memunculkan tombol layar penuh / full screen.
3. Ganti kode iframe jadi object
4. Ganti kode src menjadi data
Apa itu iframe? Iframe merupakan singkatan dari “inline frame,” segmen dari sintaks HTML. Iframe umumnya diterapkan ketika menggunakan sumber daya dari satu situs web Anda sendiri tanpa membuat konten duplikat. Pada dasarnya, iframe memungkinkan Anda untuk menyematkan situs web lain dalam kode situs web Anda, seperti halaman di dalam halaman.
Iframe juga bisa ditemukan pada video YouTube dengan tag iframe memuat pemutar video YouTube dengan ID yang disediakan dalam kode. Iframe juga memiliki parameter lain yang ditentukan, seperti tinggi, lebar, bingkai, dll. Parameter ini akan digunakan oleh skrip yang memuat pemutar video YouTube.
