Tips Tutorial Cara Memasang Video Youtube Responsive Di Blog

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

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

Cara langsung
Yaitu dengan memasang arahan 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 arahan CSS di bawah ini sempurna di atas arahan ]]></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 arahan di bawah ini untuk memanggil / menampilkan embed video YouTube di blog. Tempatkan arahan 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 arahan 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 biar di simpulan video tidak ditampilkan video terkait, biasanya ada 50 vidoe terkait dan jikalau di klik maka akan pribadi di putar di YouTube, bukan di blog Anda.

Contoh video Youtube responsive

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


Bagaimana cara biar tampilan video YouTube menyerupai ada di dalam tv (membuat dampak monitor)?

Tambahkan arahan 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 arahan di dalam tag apa saja yang memakai class yang ditentukan, menjadi tag iframe. Makara bahwasanya ini hanya untuk mengakali atau sekedar untuk menghindari penggunaan tag iframe secara pribadi 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 arahan CSS berikut ini di atas arahan ]]></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 arahan javascript berikut ini diatas arahan </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 arahan jquery versi berapa saja. Jika belum ada silahkan pasang arahan jquery berikut ini di atas arahan </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 arahan 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 arahan id video YouTube yang ingin Anda embed untuk ditampilkan di blog.

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

Cara mendapat arahan embed video YouTube lewat HP Android

Dari beberapa tutorial wacana cara menciptakan video YouTube responsive, kebanyakan mereka memakai desktop sebagai media untuk mendapat arahan embed video YouTube. Makara 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 arahan embed sebuah video YouTube.

1. Buka aplikasi YouTube di hp / smartphone Android Anda.
2. Cari video yang ingin Anda ambil arahan 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 arahan 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.