Cara Memasang Video Youtube Responsive Di Blog

Baca Juga

Penggunaan properti video dalam sebuah artikel blog makin marak semenjak YouTube meluncurkan fitur embed video. Fitur ini memungkinkan kita untuk menayangkan video YouTube secara eksklusif di blog / web kita. Yang jadi problem ialah tampilan video YouTube tidak responsive meskipun template blog yang kita gunakan sudah responsive. Untuk itu kita perlu menambahkan beberapa instruksi semoga video YouTube menjadi responsive di blog.

Pada kesempatan ini aku akan menjelaskan dua cara untuk memasang embed video YouTube di blog, serta cara mendapat instruksi embed video YouTube dengan HP Android, beserta keterangan terkait embed video YouTube di blog.

Cara langsung
Yaitu dengan memasang instruksi embed video YouTube di dalam tag iframe. Meskipun penggunaan tag iframe di dalam postingan dikatakan kurang baik dalam hal SEO, berdasarkan situs-situs SEO checker. Akan tetapi cara ini mempunyai beberapa kelebihan, diantaranya ialah sebagai berikut.

1. Embed video YouTube lebih cepat dimuat
2. Background image cover dari video YouTube sanggup tampil menjadi gambar thumbnail, jikalau posisinya sebagai gambar pertama dari sebuah postingan.

Pemasangan

Untuk menciptakan video YouTube responsive di blog, letakkan instruksi CSS di bawah ini sempurna di atas instruksi ]]></b:skin> atau </style> pada template blog Anda. Atau sanggup juga di dalam postingan pada mode HTML dengan dibungkus tag style.

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

Cara memasang video YouTube di postingan blog

Untuk memasang video YouTube, gunakan format instruksi di bawah ini untuk memanggil / menampilkan embed video YouTube di blog. Tempatkan instruksi tersebut pada mode HTML, ketika Anda menciptakan artikel / postingan.

<div class="videoyoutube"> <div class="video-responsive"> <iframe allowfullscreen="1" class="embedded-video-large" src="https://www.youtube.com/embed/KODE_ID_VIDEO?rel=0"></iframe> </div> </div>

Ganti goresan pena KODE_ID_VIDEO dengan instruksi id video YouTube yang ingin Anda embed untuk ditampilkan di blog.

Keterangan:

• Kode allowfullscreen="1" fungsinya untuk memunculkan tombol layar penuh / full screen.
• Kode rel=0 fungsinya semoga di simpulan video tidak ditampilkan video terkait, biasanya ada 50 vidoe terkait dan jikalau di klik maka akan eksklusif di putar di YouTube, bukan di blog Anda.

Contoh video Youtube responsive

Sumber: https://youtu.be/UtjFu8c_goE (ascadamusic)


Bagaimana cara semoga tampilan video YouTube menyerupai ada di dalam tv (membuat efek monitor)?

Tambahkan instruksi css di bawah ini ke dalam kumpulan CSS di atas.

.videoyoutube{background:linear-gradient(to bottom,#303030 0%,#202020);border:1px solid #404040;border-bottom:1px solid #303030;border-radius:5px;box-shadow:1px 30px 30px -26px #000000}

Sumber: https://youtu.be/lq_LKae3-Q4 (Alby boy)

Menggunakan javascript

Fungsi javascript disini ialah untuk mengubah instruksi di dalam tag apa saja yang memakai class yang ditentukan, menjadi tag iframe. Kaprikornus gotong royong ini hanya untuk mengakali atau sekedar untuk menghindari penggunaan tag iframe secara eksklusif di dalam postingan. Biar lebih SEO "katanya". Namun demikian, cara ini juga mempunyai beberapa kelemahan, diantaranya ialah sebagai berikut.

1. Background image yang dihasilkan tidak sanggup tampil sebagai gambar thumbnail. Alasannya "masih menjadi misteri"???
2. Pemuatan konten vidoe lebih usang alasannya ialah umumnya javascript ditempatkan pada tag body bab terbawah "dimuat belakangan".

Pemasangan

Tempatkan instruksi CSS berikut ini di atas instruksi ]]></b:skin> atau </style>.

.videoyoutube{text-align:center;margin:20px auto;width:400px; max-width:80%;} .video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px} .video-responsive iframe{position:absolute;top:0;left:0;width:400px;height:230px;max-width:100%; max-height:100%;border:0} @media screen and (max-width:400px) { .videoyoutube{max-width:100%} }

Pasang instruksi javascript berikut ini diatas instruksi </body>.

<script type='text/javascript'> //<![CDATA[ setTimeout(function(){$('.video-youtube').each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="1"></iframe>')})},5000); //]]> </script>

Pastikan di dalam template anda telah terdapat instruksi jquery versi berapa saja. Jika belum ada silahkan pasang instruksi jquery berikut ini di atas instruksi </body>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Cara menampilkan video YouTube di blog

Untuk memanggil / menampilkan embed video YouTube pada artikel blog, Anda cukup gunakan instruksi berikut ini pada mode HTML pada ketika menciptakan artikel / postingan.

<div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader" data-src="//www.youtube.com/embed/KODE_ID_VIDEO?rel=0"> </div> </div> </div>

Ganti goresan pena KODE_ID_VIDEO dengan instruksi id video YouTube yang ingin Anda embed untuk ditampilkan di blog.

Catatan : untuk keterangan kode, dan cara menciptakan efek monitor, Anda sanggup memakai instruksi CSS yang sama menyerupai pada cara pertama di atas.

Cara mendapat instruksi embed video YouTube lewat HP Android

Dari beberapa tutorial wacana cara menciptakan video YouTube responsive, kebanyakan mereka memakai desktop sebagai media untuk mendapat instruksi embed video YouTube. Kaprikornus ketika aku mempraktekkan tutorial tersebut, aku menemukan hambatan karena perangkat yang tersedia hanya sebuah hp Android. Tapi itu tidak menghalangi niat saya, alasannya ialah aku yakin niscaya ada jalan alternatif untuk mencapai suatu tujuan, jikalau kita mau berusaha. Berikut cara untuk mendapat instruksi embed sebuah video YouTube.

1. Buka aplikasi YouTube di hp / smartphone Android Anda.
2. Cari video yang ingin Anda ambil instruksi embed nya.
3. Setelah ketemu, klik tombol titik tiga di samping kanan video tersebut.
4. Pilih / klik Bagikan, lalu pada munculan jendala gres klik Salin tautan.
5. Tempel / pastekan url tersebut di draf postingan, tab browser, atau dimana saja Anda bisa. teladan url video YouTube : https://youtu.be/qLrWHuOQPOQ
6. Copy instruksi paling belakang dari url tersebut, biasanya berupa kombinasi abjad besar dan kecil. Itu ialah KOE_ID_VIDEO yang sanggup Anda gunakan untuk memasang embed video YouTube tersebut, dengan format menyerupai yang sudah di jelaskan di atas.