RISWAN NET
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
    Perbedaan JPG dan JPEG pada Format Gambar

    Ini Dia Perbedaan JPG dan JPEG pada Format Gambar

    Keuntungan Serta Resiko dari Keyboard Protector

    Keuntungan Serta Resiko dari Keyboard Protector

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Hal Yang Harus Dikuasai Oleh Seorang Programmer

    Jenis Jenis Komputer Serta Pembahasannya

    Jenis-Jenis Komputer Serta Penjelasannya

    Bagaimana Cara Membuat Shortcut URL Website di Desktop

    Cara Membuat Shortcut URL Website di Desktop

    Cara Transfer FIle Dari Komputer ke RDP

    Cara Transfer atau Copy File dari Komputer ke RDP

    Trending Tags

    • Asus X555
    • Komputer
    • CES 2017
    • Xiaomi
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
RISWAN NET
No Result
View All Result
Home Blogger

Cara Pasang Video Youtube Full Responsive di Blog

Deni Riswana by Deni Riswana
26 Maret 2017
in Blogger, Youtube
10 0
3
10
SHARES
495
VIEWS
ShareTweetSend

Cara Pasang Video Youtube Full Responsive di Blog – Pastinya temen-temen pernah dapatkan blog yang di dalamnya terdapat video youtube. Tidak sedikit blogger menyematkan video youtube pada artikel blognya, yang bertujuan memperjelas apa yang disampaikan penulis dalam bentuk video. Tidak hanya itu saja, kombinasi artikel dengan video yang relevan juga menjadikan blog lebih keren dan professional.

Cara Pasang Video Youtube Full Responsive di Blog
Untuk menyematkan atau memasang video youtube ke dalam artikel blog sebenarnya sangat mudah. Blogger sudah menyediakan fasilitas insert video. Caranya sebagai berikut:
1. Klik icon “insert a video” pada menu editor

2. Pilih opsi insert video,anda bisa pilih video dari youtube langsung atau video yang anda upload di youtube.

Namun ternyata ada sedikit kendala apabila video youtube disematkan pada artikel blog dengan cara tersebut, video akan terlihat kecil dan framenya tidak menyesuaikan dengan lebar halaman artikel. Sebenarnya tidak ada msalah ketika video diputar, tetapi kelihatanya tidak enak dan tidak responsive soalnya frame video terlalu kecil. Kita bisa saja mengedit panjang dan lebar frame video tersebut secara manual di bagian html artikel. Kita bisa atur ulang ukuran panjang dan lebar sesuai pas dengan halaman artikel. Tetapi cara manual tersebut tidak akan berjalan mulus apabila video tersebut diakses di smartphone atau hp. Ukuran frame yang sudah kita atur tadi ternyata tidak berfungsi di smartphone atau hp, thumbnail video akan terpotong dan tidak tampil utuh.

walaupun template yang digunakan sudah mobile responsive, tapi untuk video youtube tetap responsive. Nah inilah kekurangan platform Blogger, belum menyediakan fitur video responsive youtube, berbeda dengan WordPress.

Tapi sobat tidak perlu khawatir, di sini saya akan berbagi cara pasang video youtube full responsive di postingan blog. Ada beberapa cara untuk buat video youtube responsive, saya akan berikan dua cara pasang video youtubefull responsive di blog. Silahan perhatikan langkh langkah berikut:

Cara Pasang Video Youtube Full Responsive di Blog

Langkah Pertama
Buka Blogger, pilih Tema kemudian pilih Edit HTML. Tekan ctrl + F, tulis pada kolom pencarian  ]]></b:skin> atau </style>, lalu letakan script berikut tepat di atas ]]></b:skin> atau </style>

/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

Langkah Kedua
Kemudian letakan kode javascript loader video youtube di bawah ini tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>

Langkah Ketiga
Apabila blog sobat belum dilengkapi JQuery versi berapapun, sobat bisa tambahkan kode JQuery tepat di atas </head>

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

Langkah Keempat
Simpan template sobat

Langkah Kelima
Selanjutnya untuk menyematkan video pada postingan, gunakan kode di bawah ini

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>

Contoh link embed video yang diambil

Cara Pasang Video Youtube Full Responsive di Blog

Salin link embed video seperti di atas kemudian simpan di dalam HTML postingan seperti di bawah ini

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/3AtDnEC4zak">
</div>
</div>
</div>

Langkah Keenam
Terakhir simapan/publikasikan

Untuk cara yang kedua lebih mudah, sobat tinggal pasang kode CSS di HTML template. Sobat tidak perlu lagi membungkus link video youtube pada editor HTML postingan, tinggal menggunakan fitur “insert a video” dari Blogger seperti biasa. Maka secara otomatis tampilan frame video youtube sobat akan responsive ketika diakses di PC atau mobile/smartphone.

Namun cara yang kedua ini memiliki kelemahan, tampilan iklan adsense akan terganggu. Tampilan iklan adsense yang bersebelahan dengan video akan terpotong dan tidak tampil full. Tapi tidak masalah bagi sobat yang ingin coba cara kedua ini silahkan ikuti cara berikut:

Simpan kode CSS berikut tepat di atas ]]></b:skin> atau </style>

/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}

Atur kembali CSS max-height pada media query jika belum sesuai

Demikian langkah-langkah memasang video youtube full responsive di blog. Mudah bukan, kini video yang disematkan pada postingan akan responsive yang artinya ukuran frame video akan menyesuaikan lebar halaman postingan, ketika diakses di desktop atau smartphone/mobile.

Deni Riswana

Deni Riswana

Pengembang Digital dan Content Creator. Saat ini sedang menempuh pendidikan strata satu di Universitas Pendidikan Indonesia (UPI) dengan program studi Bisnis Digital.

Related Posts

Cara Membuat Jump Link di Blog
Blogger

Cara Membuat Jump Link di Blog dengan HTML

24 Januari 2020
Cara Menonton Video Youtube Melalui VLC Media Player
Internet

Cara Menonton Video Youtube Melalui VLC Media Player

30 Juli 2019
Menaikkan Peringkat Video Youtube
Youtube

Menaikkan Peringkat Video Youtube di Pencarian

17 Mei 2019

Comments 3

  1. Soeara Rakjat says:
    3 tahun ago

    Sudah pake cara kedua, tapi tampilan iklan adsense memang terpotong. Kalau pake cara pertama, berabe juga gan, ratusan video di postingan sudah dipost dengan insert video. Jadi harus ngedit satu per satu ya gan

    Balas
  2. Riswan Net says:
    3 tahun ago

    Blogger emang begitu mas (serba manual hehe) tapi bisa aja setting dulu di templatenya, klo web dominan ke video lebih baik pake wordpress,..

    Balas
  3. Soeara Rakjat says:
    3 tahun ago

    Sudah coba diubah max height y tapi kadang msih tetap terpotong klo dilihatbdari hp. Btw mksih gan, setidaknya saya pernah coba ??

    Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Baru-baru Ini

Persiapan Jualan Online, Apa Saja Yang Harus Disiapkan

Apa Saja Yang Harus Dipersiapkan Untuk Jualan Online?

8 Januari 2021
Alasan Kenapa Anak Mudah Harus Investasi

Alasan Kenapa Harus Investasi Sejak Muda

21 Desember 2020
3 Tips Memilih Wifi yang Akan Dipasang di Rumah

3 Tips Memilih Wifi yang Akan Dipasang di Rumah

20 Desember 2020
Rekomendasi Perpaduan Warna Cat Rumah Minimalis

Rekomendasi Perpaduan Warna Cat Rumah Minimalis

28 November 2020
Cara Praktis Membuat Web Menggunakan Template Website

Cara Praktis Membuat Web Menggunakan Template Website

27 November 2020

Riswan Net AMP

Riswan Net menyajikan informasi update seputar Teknologi, Tips Trik Internet, Perbankan, Media Sosial sampai Panduan Bisnis Online.

playstore download logo 2

Kategori

  • Adsense
  • Aplikasi
  • Bisnis
  • Bitcoin
  • Blogger
  • Desain
  • Gadget
  • Internet
  • Komputer
  • Media Soaial
  • Review
  • SEO
  • Software
  • Teknologi
  • WhatsApp

Tags

Android Bisnis Bisnis Online daily Life Internet Kesehatan Komputer Perbankan Tips Trik Travel WhatsApp Youtube

© 2019 Riswan Net All Right Reserved

  • About
  • Kontak
  • Iklan
  • Privasi
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
  • Internet
  • Komputer
  • Bisnis

© 2020 Riswan Net All Right Reserved.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In