Cara Gampang Memasang Video Youtube Responsive Pada Tampilan Mobile

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

Ada banyak cara yang sanggup dilakukan, ada yang memakai arahan Javascrip ataupun memakai arahan CSS. Pada artikel ini akan memperlihatkan 2 solusi biar video Youtube lebih anggun dilihat dalam tampilan Mobile dan tidak terpotong. Baik, untuk mempersingkat waktu eksklusif 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 lalu klik “Template atau Tema” sepeti yang terlihat pada gambar di bawah ini.

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

3. Selanjutnya, Anda cari arahan "]]> </ b: skin>" (tanpa tanda petik). Agar lebih gampang Anda sanggup memakai CRTL+F pada sajian editor HTML.

4. Copy code CSS berikut ini dan Pastekan di atas arahan "]]> </ b: skin>" menyerupai 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 Anda dan selesai arahan CSS telah siap. Langkah selanjutnya adalah,  bagaimana cara kita menggunkan arahan CSS tersebut

Baca Juga : Cara Mendapatkan Pengunjung Blog 1500 - 2000 Perhari

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

Setelah Anda menciptakan arahan CSS. Langkah selanjutnya yaitu bagaimana cara kita memakai arahan CSS tersebut di dalam sebuah artikel biar video yang kita masukan ke dalam artikel tersebut sanggup Responsive baik itu dalam tampilan desktop ataupun Mobile.

1. Untuk memasang video Youtube ke dalam artikel tentunya kita  mengambil arahan 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 bab bawah video menyerupai gambar di bawah ini

2. Setelah Anda klik share, maka selanjutnya akan muncul bannya sekali metode sharing yang akan Anda temukan, menyerupai share link to Embed, Facebook, Twitter, Google+, Blogger dan Reddit. Jangan lupa perhatikan goresan pena “Start At”, kalau tampilannya 0:00 artinya Anda membagikannya mulai dari detik 0 – hingga selesai. Jika tidak nol, misalkan 1:00 maka artinya Anda membagikan video mulai dari 1 menit hingga 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

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

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

5. Pilih mode HTML pada postingan artikel Anda.

6. Kemudian masukkan arahan di bawah ini pada bab artikel yang ingin ditambahkan video Youtube. Ganti arahan 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 yaitu hasil Screenshot tampilan mobile sebelum ditambahkan koed CSS

Dibawah ini yaitu hasil Screenshot tampilan mobile sesudah ditambahkan koed CSS

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

Sekarang anda tidak perlu khawatir lagi saat ingin menambahkan video youtube ke dalam blog anda. Cukup dengan menabhakan sedikit arahan CSS maka tampilanya lebih menarik baik di desktop ataupun mobile. Cara di atas yaitu cara pertama, ada satu cara lagi yang sanggup 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 arahan CSS berikut ini pada bab atas "]]></b:skin>" pada arahan 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 arahan CSS di atas "]]></b:skin>"

pada arahan .post-body iframe{height:240px!important;max-height:auto!important}} anda sanggup mengatur tinggi video yang ingin anda tampilkan pada tampilan mobile. disini saya menggunkaan height:240px. itu sanggup 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 arahan <center> kide ifrem-embed </center>. itu yaitu arahan untuk rata kiri-kanan.

referensi :

<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 sanggup anda gunakan biar tampilan video youtube yang ditambahkan kedalam artikel biar lebih Responsive. gammafisblog.blogspot.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.