 |
| Tampilan editor Atom |
Untungnya Youtube memberikan kebebasan untuk cara memasang kodenya tersebut.
Pertama-tama kita persiapkan dahulu CSS untuk responsivenya.
.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%; }
Lalu kode htmlnya, pada attribute src di iframe terdapat "kodevideo". Parameter tersebut diambil dari ID Video yang ingin disisipkan. Misalnya pada video trailer kura-kura ninja ini https://www.youtube.com/watch?v=QNwqg3o63MI, yang tercetak tebal adalah ID video tersebut.
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/kodevideo' frameborder='0' allowfullscreen></iframe>
</div>
Berikut contoh dari keseluruhan kode setelah diubah dan digabungkan.
<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/QNwqg3o63MI' frameborder='0' allowfullscreen></iframe></div>
Diatas adalah contoh hasil video youtube yang disisipkan secara responsive. Dan sebaiknya untuk kode css diletakkan didalam tag element <head> untuk menghindari error pada validator html5.
Penulis
ConversionConversion EmoticonEmoticon