XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
  • Profile
No Result
View All Result
XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
No Result
View All Result
  • Profile
XKOMODOTCOM

Cara Membuat Responsive Embed Video Youtube di Blog

Febri Tri Harmoko by Febri Tri Harmoko
July 3, 2015
in Personal
Reading Time: 10 mins read
0
A A
0
0
SHARES
541
VIEWS
ShareTweet
Video Responsive di postingan Blog

Tutorial Membuat Embed Video Youtube Responsive dan Valid HTML 5 – Pasang Video Youtube Full Responsive di Blog. Kali ini saya akan membagikan tutorial bagaimana caranya membuat video youtube menjadi responsive dan valid HTML5 pastinya 🙂 Bagi kalian yang suka menggunakan video youtube di postingan blog pasti merasa resa kalau video yang kita gunakan belum responsive dan ketika kita ceck di validator[dot]w3[dot]org atau validator lain nya. Pasti hasil yang di dapatkan tidak sesuai keinginan 🙂 maka dari itu saya mau share trik ataupun tips untuk membuat embed video youtube menjadi lebih responsive dan pastinya valid HTML5 dong yah :hebat
     Silahkan Simak Tutorial ini baik baik 😉

Tutorial

  • Buka Youtube
  • Cari Video yang ingin di tambahkan ke postingan blog.
  • Kemudian Copy Kode Embed / HTML Video Youtube (bisa lihat Gambar di atas untuk tutorial Copy Kode Video youtube nya)

Contoh Video :

<iframe width="560" height="315" src="https://www.youtube.com/embed/v4Vj77hhsEE" frameborder="0" allowfullscreen></iframe>

Terlihat kode video di atas masih menggunakan Kode HTML Embed Video yang belum di modifikasi.

  • Setelah di copy dan kamu akan mendapatkan kode iframe seperti contoh di atas. Maka langkah Selanjutnya adalah Hapus kode width=”…..” , height=”….” , frameborder=”…”, dan allowfullscreen :ke Sehingga tampilan kode akan menjadi seperti ini.
<iframe src="https://www.youtube.com/embed/v4Vj77hhsEE"></iframe>
  • Langkah Selanjutnya kita akan membuat Embed video tersebut menjadi responsive.
  • Silahkan tambahkan Kode Style berikut kedalam kode iframe / Embed video tadi.
style="min-height: 315px; width: 90%;"

Saran saya: Gunakan Style ini agar Ukuran video Sesuai dengan yang aslinya 😀

  • Sehingga Kode iframe video tersebut menjadi seperti ini:
<iframe src="https://www.youtube.com/embed/v4Vj77hhsEE" style="min-height: 315px; width: 90%;" ></iframe>
  • Silahkan Atur width (untuk lebar) dan min-height (tinggi minimal video) sesuka hati kamu.
  • Lalu Simpan Kode video tersebut di dalam Postingan kamu. di dalam Post :ke HTML bukan di Compose yah 🙂
pasang video youtube di blog menjadi responsive dan valid html5
  • Terakhir tinggal publish video yang kamu share di blog itu 🙂
      Sekian tutorial membuat video youtube menjadi Responsive dan Valid HTML 5 🙂 semoga membantu dan bermanfaat untuk kita semua 😀 :hebat jangan lupa yah untuk share artikel ini ke akun sosmed mu dan teman – teman blogger lain nya 😉 dan buat kamu yang suka contoh video di atas monggo di subscribe channel video saya yah 😀 Makasih.
Artikel ini berasal dari www.xkomo.com untuk mendapatkan informasi lebih lanjut dan lengkap silahkan kunjungi situs saya.
ShareTweet
Febri Tri Harmoko

Febri Tri Harmoko

Hanya pemuda tersesat yang gemar menulis dan berbagi informasi di internet dan juga gemar membaca komik, nonton anime dan pencinta kucing sejati pastinya.

Related Posts

Jangan Gunakan DNS Cloudflare 1.1.1.1 Jika Tidak Ingin Bermasalah
Internet

Jangan Gunakan DNS Cloudflare 1.1.1.1 Jika Tidak Ingin Bermasalah

2 months ago
184
Kuliah 6 Tahun 8 Bulan, Nyaris Drop-Out dan Hilangnya Masa Depan
Personal

Kuliah 6 Tahun 8 Bulan, Nyaris Drop-Out dan Hilangnya Masa Depan

1 year ago
340
ASUS ROG Phone 3
Smartphone

Dapat ASUS ROG Phone 3 Gratis

2 years ago
581
Rekomendasi Jasa Cleaning Service di Jakarta dan Sekitarnya (JADETABEK)
Personal

Rekomendasi Jasa Cleaning Service di Jakarta dan Sekitarnya (JADETABEK)

2 years ago
291
Goddess of Genesis - Game Turn-Based Strategy Mobile Terbaik Saat Ini
Review

Goddess of Genesis, Game Turn-Based Strategy Mobile Terbaik Saat Ini

System Override Collection Event

Apex Legends Season 4 System Override Collection Event Hadir dengan 100+ Exclusive Items

2 years ago
583
Load More
Please login to join discussion

ARTIKEL TERBARU

Cara Setting Private atau Public DNS di Android - PC - Laptop
Internet

Cara Setting Private / Public DNS di Android / PC / Laptop (Provider Hostname Terlengkap)

by Febri Tri Harmoko
3 weeks ago
0
248

Kamu sedang mencari bagaimana cara menyetel DNS pribadi di smartphone (android) atau di PC / laptop? sudah cari sana sini...

Read more

Solusi Tidak Bisa Main Game Online dengan Internet IndiHome

ROG Berbagi Bersama Anak Yatim di Bulan Ramadan

ROG Flow Z13 – Laptop Sekaligus Gaming Tablet Impian Para Gamers

ASUS ExpertBook B3 Flip – Laptop Bisnis Convertible Touchscreen

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
Advertise with us

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

No Result
View All Result
  • Profile
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

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

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.