Skip to main content

Cara Terbaru Embed Video Youtube Responsive Pada Halaman Posting

Sabtu, 03 April 2021

Cara Terbaru Embed Video Youtube Responsive Pada Halaman Posting - Saat ini kita sebagai admin blog harus benar-benar memikirkan tampilan blog dari berbagai perangkat device. Hal tersebut agar kenyamanan kepada para pembaca blog semua tidak tergangu.

Sebab jika tidak, saya yakin visitor blog akan malas membaca dan mungkin langsung mengclose blog anda! sebab melihat tampilan halaman blog kamu tidak responsive alias acak-acakan.

Kesimpulannya Membuat tampilan blog responsive sudah menjadi harga mati yang tidak ada tawar-menawar lagi.

Begitupun dengan video youtube yang ingin kita tampilkan di halaman posting, kita harus melakukan beberapa setelan agar video youtube menjadi responsive dan enak untuk ditonton.

Untuk membuat video youtube responsive tidaklah sulit cukup meletakan kode CSS berikut ini pada </style> template anda kemudian save template.

/* Embed Youtube */
.videowrapper {float:none;clear:both;width:100%;position:relative;padding-bottom:56.25%;padding-top: 25px; height: 0; }.videowrapper iframe {position:absolute;top:0;left:0;width: 100%;height:100%;}

Selajutnya kita masuk ke editor postingan dengan dan letakan kode pemanggil ini:

<div class="videowrapper">
<iframe width="560" height="480" src="https://www.youtube.com/embed/ziFITphwsH8" frameborder="0" gesture="media" allowfullscreen ></iframe></div>

Perhatikan kode yang saya marking kuning! kode tersebut nantinya bisa kamu ganti dengan url video youtube anda.

Berikut ini contoh video youtube responsive. Anda bisa cek sendiri lewat hp kalian. Selamat menonton Enjoyyyyy..

Itulah Cara Terbaru Embed Video Youtube Responsive Pada Halaman Posting, cukup mudah dan menurut saya cara ini sangat bagus sebab kode-kode yang ditampilkan tidak menggunakan jquery yang bisa menghambat pertumbuhan tulang dan gizi blog anda 😅.

Bagikan:

Hallo sobat! blog.jejakunik.com membuka kesempatan untuk anda mempromosikan Produk atau Jasa secara GRATIS pada blog ini. Detailnya bisa kamu lihat di CLICK HERE
Buka Komentar
Tutup Komentar