Cara Mudah Memasang Video Youtube Responsive Pada Tampilan Mobile

Cara Mudah Memasang Video Youtube Responsive Pada Tampilan Mobile. Video merupakan salah satu hal terpenting dalam sebuah artikel, karena Google menyarankan untuk menambahkan video dalam setiap artikel atau paling tidak artikel tersebut dilengkapi dengan gambar. Namun jika Anda ingin menambahkan video Youtube dalam sebuah artikel maka penting bagi Anda untuk memperhatikan apakah video Youtube tersebut Responsive dalam tampilan Mobile, karena jika tidak maka akan kurang indah untuk dilihat dalam artian video tersebut akan terpotong. Lantas bagaimana caranya agar video Youtube Responsive pada tampilan Mobile?

Ada banyak cara yang dapat dilakukan, ada yang menggunakan kode Javascrip ataupun menggunakan kode CSS. Pada artikel ini Gammafis Blog akan memberikan 2 solusi agar video Youtube lebih bagus dilihat dalam tampilan Mobile dan tidak terpotong. Baik, untuk mempersingkat waktu langsung saja kita mulai.


Baca Juga : Cara Daftar dan Submit URL Artikel Blog di Google Search Console Agar Terindek Google Serta Panduan Lengkap

Cara 1 : Membuat Kode CSS untuk video Youtube Responsive di Blog atau Website

1. Langkah pertama Anda log in ke akun Blogger.com kemudian klik “Template atau Tema” sepeti yang terlihat pada gambar di bawah ini.

2. Langkah kedua yaitu klik tombol “Edit HTML” seperti yang terlihat pada gambar di atas

3. Selanjutnya, Anda cari kode "]]> </ b: skin>" (tanpa tanda petik). Agar lebih mudah Anda bisa menggunakan CRTL+F pada menu editor HTML.

4. Copy code CSS berikut ini dan Pastekan di atas kode "]]> </ b: skin>" seperti pada gambar di bawah ini.

/* Kode Video Youtube Responsive : https://www.gammafisblog.com/

---------------------------------------------------------------------------- */

.youtube-embed { margin: 0px auto; max-width: 560px;}

.youtube-container { max-width: 100%; height: 0; position: relative; overflow: hidden; padding-bottom: 56%;}

.youtube-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

5. Langkah berikutnya, Save Template Anda dan selesai kode CSS telah siap. Langkah selanjutnya adalah,  bagaimana cara kita menggunkan kode CSS tersebut

Baca Juga : Cara Mendapatkan Pengunjung Blog 1500 - 2000 Perhari

Cara menggunakan Kode CSS dan Memasang Video Youtube Responsive pada Artikel Anda:

Setelah Anda membuat kode CSS. Langkah selanjutnya adalah bagaimana cara kita menggunakan kode CSS tersebut di dalam sebuah artikel agar video yang kita masukan ke dalam artikel tersebut dapat Responsive baik itu dalam tampilan desktop ataupun Mobile.

1. Untuk memasang video Youtube ke dalam artikel tentunya kita  mengambil kode Ifrem atau Embed dari video Youtube yang ingin Anda share ke blog. Caranya cukup mudah, masuk ke youtube.com. Kemudian cari video yang ingin ditambahkan ke dalam artikel. Jika sudah ketemu, selanjutnya klik share pada bagian bawah video seperti gambar di bawah ini

2. Setelah Anda klik share, maka selanjutnya akan muncul bannya sekali metode sharing yang akan Anda temukan, seperti share link to Embed, Facebook, Twitter, Google+, Blogger dan Reddit. Jangan lupa perhatikan tulisan “Start At”, jika tampilannya 0:00 artinya Anda membagikannya mulai dari detik 0 – sampai selesai. Jika tidak nol, misalkan 1:00 maka artinya Anda membagikan video mulai dari 1 menit sampai selesai. Maka itu harus diatur pada 0 : 00. Seperti pada gambar di bawah ini.

3. Klik Embed – kemudia copy dan ambil code url-Embed dari video youtube tersebut tersebut

contoh : Url-Embde dari video diatas adalah https://www.youtube.com/embed/e-Q8ZRTg_RI

4. Setelah Anda copy kode tersebut, selanjutnya masuk ke dalam artikel yang ingin Anda tambahkan video tersebut.

5. Pilih mode HTML pada postingan artikel Anda.

6. Kemudian masukkan kode di bawah ini pada bagian artikel yang ingin ditambahkan video Youtube. Ganti kode yang berwarna merah dengan url-Embed dari video youtube yang ingin di masukkan.

<center>

<div class="youtube-embed">

<div class="youtube-container">

<iframe width="560" height="315" src="https://www.youtube.com/embed/e-Q8ZRTg_RI" frameborder="0" allowfullscreen></iframe>

</div>

</div>

</center>

Dibawah ini adalah hasil Screenshot tampilan mobile sebelum ditambahkan koed CSS

Dibawah ini adalah hasil Screenshot tampilan mobile setelah ditambahkan koed CSS

Dapat kita lihat bahwa, tampilan mobile sebelum ditambahkan code CSS diatas kurang Responsive dimana tampilan video jadi terpotong. sedangkan setelah ditambahkan kode CSS video Youtube yang ditambahkan menjadi Responsive.

Sekarang anda tidak perlu khawatir lagi ketika ingin menambahkan video youtube ke dalam blog anda. Cukup dengan menabhakan sedikit kode CSS maka tampilanya lebih menarik baik di desktop ataupun mobile. Cara di atas adalah cara pertama, ada satu cara lagi yang dapat anda lakukan. Berikut akan saya jelaskan.

Baca Juga : Cara Mengatasi Halaman Homepage yang Hanya Menampilkan Satu Artikel Saja

Cara 2 : Membuat Kode CSS untuk video Youtube Responsive di Blog atau Website

Cara yang kedua terbilang cukup simple, yaitu dengan cara menambahkan kode CSS berikut ini pada bagian atas "]]></b:skin>" pada kode HTML Tempelate Anda

/* Star Kode Youtube Responsive */
.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:240px!important;max-height:auto!important}}
/* And Kode Youtube Responsive */

Perhatikan gambar dibawah ini : Letak kode CSS di atas "]]></b:skin>"

pada kode .post-body iframe{height:240px!important;max-height:auto!important}} anda dapat mengatur tinggi video yang ingin anda tampilkan pada tampilan mobile. disini saya menggunkaan height:240px. itu dapat di atur sesuai kebutuhan.

Langkah terakhir Anda Copy semua code ifrem-embed dari video youtube tersebut dan tempatkan pada mode HTML dari artike yang akan diposting, jangan lupa tambahkan kode <center> kide ifrem-embed </center>. itu adalah kode untuk rata kiri-kanan.

contoh :

<center>
<iframe width="560" height="315" src="h ttps://w ww.youtube .com/embed/e-Q8ZRTg_RI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</center>

Itulah dua cara yang dapat anda gunakan agar tampilan video youtube yang ditambahkan kedalam artikel agar lebih Responsive. www.gammafisblog.com menggunkan cara kedua dalam menampilkan video Responsive semua terserah pada anda ingin pake dan lebih nyaman dengan yang mana. Terima Kasih atas kunjungannya. Semoga artikel ini bermanfaat, selamat mencoba dan semoga berhasil.

Share this post