HTML:
|
1 2 3 |
<div class="video"> <iframe width="560" height="315" src="https://www.youtube.com/embed/gIO9a2HXrl0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> |
Пусть вас не смущает ширина и высота фрейма, которую выдает YouTube при экспорте, их заменит наш стиль
CSS для формата 16:9:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.video { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
CSS для формата 4:3:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.video { position: relative; padding-bottom: 75%; padding-top: 25px; height: 0; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Добавить комментарий: