Berikut adalah contoh tampilan yang tidak responsif:
Lalu bagaimana cara mengatasinya? Secara umum, kode embed yang diperoleh dari Youtube adalah markup default yang bisa kita modifikasi tampilannya. Untuk itu, kita hanya perlu menambahkan kode CSS – dengan menambahkan kelas – agar frame video dari Youtube bisa menyesuaikan ukuran kontainer halaman web.
Kode embed Youtube asli:
- <iframe src="https://www.youtube.com/embed/3c_McS4_2A8?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
- <div class="responsive-embed-youtube"><iframe src="https://www.youtube.com/embed/3c_McS4_2A8?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
- .responsive-embed-youtube {
- position:relative;
- padding-bottom:56.25%;
- padding-top:30px;
- height:0;
- overflow:hidden;
- }
- .responsive-embed-youtube iframe, .responsive-embed-youtube object, .responsive-embed-youtube embed {
- position:absolute;
- top:0;
- left:0;
- width:100%;
- height:100%;
- right:10px;
- }
Saya telah mencoba trik ini pada beberapa theme WordPress dan berhasil. Namun, tidak menutup kemungkinan trik ini dapat diimplementasikan ke dalam tampilan web yang lain.
Selamat mencoba.
Sumber: http://www.adityarizki.net/agar-video-youtube-menjadi-responsive/
Dicoba di Blogger works!
No comments:
Post a Comment