How To Embed Youtube Videos Responsively


How To Embed Youtube Videos Responsively atau kata lainnya Bagaimana Cara Memasang Video Youtube Responsive di Blogger Blogspot merupakan tulisan aku kali ini setelah sekian lama ndak nulis secara langsung di blog ini. Lamaaaa sekali ndak nulis disini.

Nulis dengan gaya acakadul bin suka hati. Lha aku ndak bisa nulis secara bener seeeh....

Jadi begini.... begitu juga boleh.

Awak ini dari kemaren penasaran ama tampilan video Youtube di berbagai blog yang dibuka di hapeh alias semarpon kok tampilannya ndak enak diliat baik kekecilan atau malah kegedean sehingga ndak nampak awak tombol yang bisa dipejet-pejet (pijat ngkaleee).

Naaaah karena ga jelas gitu tampilannya akan membuat para pemustaka blog alias pengunjung blog akan kesel terus tereak-tereak lalu banting hapehnya. Teros hapehnya rusak. Trooos beli hapeh baru. Khan kesian pabrik hapeh jadi terus menerus bikin hapeh akibat sering buat hapeh baru karena hapeh buatannya sering dibanting KZL ama pengunjung blog attayaya.

KZL liat tampilan video youtube yang ndak jelas alias kegedean

Eeeeh.... ini sebenarnya kasus di blog Riau Magazine | Khazanah Riau dan Indonesia yang Kaya http://www.riaumagz.com.

Keseel kesel keseeeelll....

Lalu aku nanya mbah gugel, eeeh jawabanya pada ndak ngenakin gitu. Masa iya aku harus ngobrak abrik HTML blog lagi. duuuuh.... dah lupa tuh caranya.

Tanya sana trossss tanya situ dan kemudian terdampar di dunia antah berantah yang memberi jawaban cara Cara Memasang Video Youtube Responsive di Blogger Blogspot yang kalo diterjemahin ke boso linggis berarti How To Embed Youtube Videos Responsively. Aaaah ndak pandailah awak nak pake bohoso negeri tetangga tu.

Naaaah kejadiannya kek gambar bawah ini :

Kalo dilihat pake lapi ato kompi seeeeh ga begitu masalah karena width=560 dan height=315 tak ngaruh dilayar


Nah kalo di hapeeeh yaaa jadinya kegedean kali embed video youtube dengan width=560 dan height=315


Padahal kepengennya kelihatan atau view 100% di body-post kek dibawah ini


ini kalo dilihat pake layar kecil, embed video youtube masih tetep kinclong.


Masalahnyaaaa..... youtube ndak ngasi pilihan view embed video youtube 100% di body-post alias ndak responsive menyesuaikan dengan layar.

Oleh karena itu.... maka perdamaian dunia harus ditegakkan eeeh...

Dicarilah solusi Cara Memasang Video Youtube Responsive di Blogger Blogspot alias How To Embed Youtube Videos Responsively.

Begini neeeh caranya

Pertama dan utama.... ada video youtube yang mau di-embed.....
yaelaaaaah yang punya blog ngajak berantem neh
Lhaaa tentu saja of-course ada video youtube baik punya sendiri maupun punya orang dengan dengan hak cipta yang tidak dicuri. Bisa pake Hak Cipta atau Lisensi Creative Commons (CC BY).

Kedua dan setelah yang pertama
yaeeelah ribet amat
ada script embed dari Video Youtube :
buka video youtube yang mau di-embed
klik "Bagikan" / share
Klik "sematkan" / embeded
klik "salin" / copy

maka akan dapat script embed html video youtube, misalnya :
<iframe width="560" height="315" src="https://www.youtube.com/embed/-ih_7f1ynhg" frameborder="0" allowfullscreen></iframe>>

maka pada blog akan kelihatan seperti ini :



Kalo dilihat pake hapeh maka jadinya agak kebesaran melewati batas-batas peri-kemanusiaan

Lalu supaya keliatan keceh badai video youtube yang disemat alias di-embed di hapeh orang lain dan ndak melewati batas-batas peri-kemanusian maupun peri-kehapehan maka script embed video youtube itu perlu dimodifikasi sikitlah supaya cantik.

Tambahkan script ini sehingga menjadi script ini
aaah bingung... ngerti ajalah ya

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/-ih_7f1ynhg' frameborder='0' allowfullscreen></iframe></div>

Yang merah tuh script embed video youtube dimana script width dan height yang dibuang
Yang ndak merah yaaaaaa tambahan script

Maka jadinya kek gini
cobak liat di hapeh masing-masing

eeeeh ini video Ustad Abdul Somad yang lagi ceramah di Mesjid Jabal Rahmah Tangkerang Utara Pekanbaru, dekat rumahku.



Daaaaah segitu ajalah Cara Memasang Video Youtube Responsive di Blogger Blogspot atawa How To Embed Youtube Videos Responsively

Semoga yaaaah semogalah....