Chèn embed youtube hoặc iframe với responsive
Các bạn làm theo hướng dẫn bên dưới Code CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.iframe-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .iframe-container iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; } |
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .iframe-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .iframe-container iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; } </style> <div class="iframe-container"><iframe class="" width="560" height="315" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> |