Agar Video Youtube di Blog Menjadi Responsive


Zona Tutorial - Kadang sobat blogger ingin menyematkan video youtube pada blog atau website pribadi sebagai bahan tutorial maupun refrensi pendukung tambahan untuk ditayangkan pada blog. Sewaktu kita melihat video pada laman artikel di browser computer PC atau laptop yang kita muat baik-baik saja dan tidak tampak ada masalah yang terlihat, Tapi masalah akan muncul ketika kita membuka postingan artikel yang tersemat video youtube pada perangkat smartphone, ya video tersebut tampak keluar dari zona nyamanya :D atau tidak bisa menyesuaikan dengan ukuran device yang memuatnya inilah yang disebut sebagai Tidak Responsive.

Lantas bagaimana agar video tersebut responsive mengikuti ukuran device nya  ? mari simak tutorial kali ini tentang cara agar video youtube di blog menjadi responsive. Tutorial kali ini akan menggunakan script CSS dengan menyematkan ke dalam Template blogger.

Tutorial Agar Video Youtube di Blog Menjadi Responsive

1. Masuk pada dashboard blogger pilih Tema - Edit HTML
2. Masukan Script CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>. Cari script tersebut dengan (Crtl + F) untuk search.

/* 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

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.

Kode Embed video yotube dapat sobat dapatkan melalui tombol share pada youtube

Agar Video Youtube di Blog Menjadi Responsive

Demikian tutorial agar video youtube responsive di youtube yang saya bagikan kali ini.

Selamat mencoba dan semoga bermanfaat..

0 Response to "Agar Video Youtube di Blog Menjadi Responsive"

Post a Comment

Iklan Atas Artikel

Iklan2

Iklan Tengah Artikel 2

Iklan Bawah Artikel