Langsung ke konten utama

Cara Menampilkan Video Youtube di Blog Agar Tampil Responsive Mengikuti Perangkat

Cara Menampilkan Video Youtube di Blog Agar Tampil Responsive Mengikuti Perangkat
Cara Menampilkan Video Youtube di Blog Agar Tampil Responsive Mengikuti Perangkat

PeluangSukses.Com - Jika kamu mempunyai channel youtube dan ingin menayangkan video mu pada blog Sebagai pengembang web, saya yakin Anda bingung tentang, 'Bagaimana cara memeriksa apakah situs web saya cukup responsif dan berfungsi dengan baik di semua perangkat?' Atau sebuah pertanyaan mungkin muncul di kepala Anda: bagaimana jika gambar saya rusak di perangkat lain? 

Jangan khawatir. Saya mendapat pertanyaan ini juga ketika saya mulai dengan proses membuat desain responsif atau mungkin baru saja membangun situs web pertamamu dalam menampilkan video tertentu maka kamu bisa menyesuaikan lebar layar yang tampak responsive di semua gadget.

  • Kode HTML dalam postingan

untuk itu kamu perlu menggunakan kode html berikut dalam postingan atau dimanapun kamu ingin menempatkan video:

<div class="videoyoutube">

<div class="video-responsive">

<iframe allowfullscreen="1" class="embedded-video-large" src="link-youtubemu"></iframe>

</div>

</div>

  • Kode CSS pada template

dan koding CSS untuk mengatur lebar layar agar sesuai gadget maka kamu perlu menggunakan ini letakkkan pada skin atau dalam deretan kode CSS pada template blogmu:

.videoyoutube {
    padding-bottom: 5px;
    background: #cccccc;
    text-align: center;
    margin-top: -10px !important;
}
.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    margin-bottom: 8px;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.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;
}


Cara diatas bisa kamu terapkan dalam postingan atau pada tambahkan gadget HTML baru ditempat dimanapun yang dinginkan.

PeluangSukses.Com

20 Kata Yang Orang Tua Harus Ucapkan Ke Anak Sedari Kecil

Menghitung Keuntungan Budidaya Ikan Lele

5 Cara Tetap Sejuk di Cuaca Panas Tanpa AC Rumah

Antara Prestasi Anies dan Prestasi Bank DKI

Sederet Artis Nikah Tanpa Restu Orang Tua hingga ada yang Pilih MURTAD atau MUALAF

Anies dipanggil KPK ! Siasat Licik Jegal Lawan Politik 2024 ! Jokowi Megawati Prabowo Anies Baswedan

5 Contoh Kekuatan Makeup Riasan Sangat Senang Dengan Hasilnya

KAMPUNG SUSUN ALA ANIES & RUSUN ALA AHOK BEDA

TAK TAHAN MENJANDA ARTIS CANTIK PUNYA BANYAK MANTAN SUAMI! Siapa saja mereka?

5 Cara Ampuh Usir Semut di Toples Gula dan Makanan Manis Lainnya

Support : Copyright © 2019. PeluangSukses.Com - Informasi Usaha, Bisnis dan Gaya Hidup - All Rights Reserved