✔ Semoga Video Youtube Di Blog Menjadi Responsive
Zona Tutorial - Kadang teman blogger ingin menyematkan video youtube pada blog atau website pribadi sebagai materi tutorial maupun refrensi pendukung komplemen 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 problem yang terlihat, Tapi problem akan muncul saat kita membuka postingan artikel yang tersemat video youtube pada perangkat smartphone, ya video tersebut tampak keluar dari zona nyamanya :D atau tidak sanggup menyesuaikan dengan ukuran device yang memuatnya inilah yang disebut sebagai Tidak Responsive.
Lantas bagaimana semoga video tersebut responsive mengikuti ukuran device nya ? mari simak tutorial kali ini perihal cara semoga video youtube di blog menjadi responsive. Tutorial kali ini akan memakai 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 sempurna diatas instruksi ]]></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 instruksi XXXXXXX diatas dengan kode embed video youtube yang akan dimuat.
Liat preview postingan apakah sudah sesuai kemudian publikasikan.
Keterangan:
Kode rel=0 fungsinya semoga di final video tidak ditampilkan video terkait, biasanya ada 50 video terkait dan jikalau di klik maka akan pribadi di putar di YouTube, bukan di blog Anda.
Kode allowfullscreen="1" fungsinya untuk memunculkan tombol layar penuh / full screen.
Kode rel=0 fungsinya semoga di final video tidak ditampilkan video terkait, biasanya ada 50 video terkait dan jikalau di klik maka akan pribadi di putar di YouTube, bukan di blog Anda.
Kode allowfullscreen="1" fungsinya untuk memunculkan tombol layar penuh / full screen.
Kode Embed video yotube sanggup teman dapatkan melalui tombol share pada youtube
Demikian tutorial semoga video youtube responsive di youtube yang aku bagikan kali ini.
Selamat mencoba dan semoga bermanfaat..
0 Response to "✔ Semoga Video Youtube Di Blog Menjadi Responsive"
Posting Komentar