Saya menghadapi masalah ketika saya menambahkan Video Youtube di blog saya, karena saya menggunakan tema Template responsif, Youtube video tidak menjadi responsif karena video memiliki lebar tetap dan tinggi. Blog yang terlihat cukup baik pada desktop tetapi ketika aku melihat dari Tablet, itu desain ponsel pecah. Its menciptakan masalah di blog saya karena saya masih perlu menambahkan beberapa video di blog saya.
Aku Googled untuk mengetahui solusi yang tepat sehingga saya dapat membuat setiap video sesuai dengan tema desain, yaitu responsif dan saya menemukan trik sederhana ini.
Nah tweak CSS sederhana membantu saya. Yang Anda butuhkan untuk membungkus kode embed dengan kelas CSS. Salin kode CSS berikut untuk stylesheet Anda dan memperbarui kode embed video dengan kode berikut seperti yang diberikan di sini.
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;}.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
|
Sekarang mengedit kode HTML di sekitar kode embed Anda;
<div class="video-container"> <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe> </div>
Ini bekerja pada template responsif tema saya dan saya yakin itu akan bekerja pada halaman web Anda. Saya menemukan tweak ini pada http://webdesignerwall.com/tutorials/css-elastic-videos
0 komentar:
Post a Comment