Cara Gampang Memasang Video Youtube Responsive Pada Tampilan Mobile

Cara Mudah Memasang Video Youtube Responsive Pada Tampilan Mobile. Video adalah salah satu hal terpenting dalam sebuah artikel, sebab Google menyarankan buat menambahkan video dalam setiap artikel atau paling enggak artikel tersebut dilengkapi dengan gambar. Namun jika Kalian mau menambahkan video Youtube dalam sebuah artikel maka penting bagi Kalian buat memperhatikan apakah video Youtube tersebut Responsive dalam tampilan Mobile, sebab jika enggak maka bakal kurang indah buat dilihat dalam artian video tersebut bakal 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 bakal memberikan 2 solusi agar video Youtube lebih bagus dilihat dalam tampilan Mobile serta enggak terpotong. Baik, buat mempersingkat waktu langsung saja kita mulai.


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

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

1. Langkah pertama Kalian 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, Kalian cari kode "]]> </ b: skin>" (tanpa tanda petik). Agar lebih gampang Kalian bisa menggunakan CRTL+F pada menu editor HTML.

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

/* Kode Video Youtube Responsive : https://gammafisblog.blogspot.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 Kalian serta 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 serta Memasang Video Youtube Responsive pada Artikel Anda:

Setelah Kalian membuat kode CSS. Langkah selanjutnya yaitu 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 mau Kalian share ke blog. Caranya cukup mudah, masuk ke youtube.com. Kemudian cari video yang mau ditambahkan ke dalam artikel. kalau Telah ketemu, selanjutnya klik share pada bagian bawah video seperti gambar di bawah ini

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

3. Klik Embed – kemudia copy serta 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 Kalian copy kode tersebut, selanjutnya masuk ke dalam artikel yang mau Kalian tambahkan video tersebut.

5. Pilih mode HTML pada postingan artikel Anda.

6. Kemudian masukkan kode di bawah ini pada bagian artikel yang mau ditambahkan video Youtube. Ganti kode yang berwarna merah dengan url-Embed dari video youtube yang mau 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 yaitu hasil Screenshot tampilan mobile sebelum ditambahkan koed CSS

Dibawah ini yaitu hasil Screenshot tampilan mobile setelah ditambahkan koed CSS

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

Sekarang anda enggak perlu khawatir lagi saat mau 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 yaitu cara pertama, ada satu cara lagi yang dapat anda lakukan. Berikut bakal saya jelaskan.

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

Cara 2 : Membuat Kode CSS buat 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 mau anda tampilkan pada tampilan mobile. disini saya menggunkaan height:240px. itu dapat di atur sesuai kebutuhan.

Langkah terakhir Kalian Copy semua code ifrem-embed dari video youtube tersebut serta tempatkan pada mode HTML dari artike yang bakal diposting, jangan lupa tambahkan kode <center> kide ifrem-embed </center>. itu yaitu kode buat 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. gammafisblog.blogspot.com menggunkan cara kedua dalam menampilkan video Responsive semua terserah pada anda mau pake serta lebih nyaman dengan yang mana. Terima Kasih atas kunjungannya. Semoga artikel ini bermanfaat, selamat mencoba serta semoga berhasil.

Bagikan Artikel ini