Создание сайтов в Одессе. Заказать сайт Одесса. | Веб-студия ION ☎ (068) 351-76-21

How to adapt iframe videos (YouTube and Vimeo) for the website

We recommend that you place the iframe in a div block with the specified proportions. The video should absolutely be positioned in that div. The video in the iframe will zoom in and out following the parent div and keep its normal proportions.

Put the code with the video in the right place:

Here is the video code

Put in styles in CSS file:

.video {position:relative;padding-bottom:56.25%;//padding-top:25px;height:0;}

.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

Styles if you have bootstrap 3:

@media (max-width: 767px) {
.video {
margin-left: -30px;
margin-right: -30px;
padding-top: 25px;
top: 10px;

.video {position:relative;padding-bottom:56.25%;/*proportion of video 16:9 */padding-top:;height:0;}

.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}