Не могу убрать черные полосы видеофона сайта

[каток]

Здравствуйте, пишу сайт на вордпресс, первый раз вставляю видео фон, хотела на всю ширину сайта, но при маштабировании видео убегает, оставила не на всю ширину,к тому же в любом варианте выходят черные полосы, не могу их убрать , помогите пожалуйста и если можно подскажите еще как сделать на всю ширину, не меняя высоту. мой сайт http://whitemagic-studio.ru/

коды сss

\#big-video {
position: relative;
background: #000;
overflow: hidden;
height: 582px;
}
 
#big-video .video {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
 
#big-video video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
 
#big-video .video-element {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: auto 100%;
}




/*
.bgr-video{ display: block; width: 100%; height: 100%; }
#cc-jimdo-bgr-video {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}
*/
#cc-jimdo-bgr-video > iframe {
/*	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;*/

/*min-width: 100%; 
min-height: 100%;
width: auto; height: auto; */

}

html

<div id="cc-jimdo-bgr-video" class="bgr-video" style="visibility: visible;"><iframe id="cc-bgr-ytplayer" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/PPMssTWs9Ck? wmode=transparent&amp;playlist=PPMssTWs9Ck&amp;autoplay=1&amp;start=0&amp;rel=0&amp;loop=1&amp;controls=0&amp;modestbranding=1&amp;showinfo=0&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fwww.natali-solnechnaya.com&amp;widgetid=1" style="height: 1158px; width: 2059px;"></iframe> 
<div class="unclickable"><div></div></div>
<div class="bg-hide"></div>
</div>

[Alex11223]

Сообщение от каток

к тому же в любом варианте выходят черные полосы, не могу их убрать , помогите пожалуйста и если можно подскажите еще как сделать на всю ширину, не меняя высоту

если размер страницы отображаемой в вашем браузерe не пропорционален размеру видео, то никак вроде.

Ну то есть 16:9 видео без полос будет только при фулскрин (F11) на 16:9 мониторе.

Хотя не, уже вроде есть object-fit, но не везде.
http://caniuse.com/#search=object-fit

[каток]

попробовала рикрепить

 @supports (object-fit: contain
) {
     #trailer > video {
         top: 0; left: 0;
         width: 100%; height: 100%;
         object-fit: contain
;
     }
 }

не помогло, а у людей же получается вставить видеофон без черных полос, может дело в видео.а если поменять видео с форматом 16 на9.

______________________
Используйте тег [CODE] (кнопка с решеткой # в форме сообщения) при вставке кода на форум.

[Alex11223]

Дык fill, а не contain.

[каток]

так поставила

/*
.bgr-video{ display: block; width: 100%; height: 100%; }
#cc-jimdo-bgr-video {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}
*/
#cc-jimdo-bgr-video > iframe {
/*	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;*/

/*min-width: 100%; 
min-height: 100%;
width: auto; height: auto; */

}



.is_overlay{ display: block; width: 100%; height: 100%; }
#trailer {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}

#trailer > video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 @supports (object-fit: fill
) {
     #trailer > video {
         top: 0; left: 0;
         width: 100%; height: 100%;
         object-fit: fill;
     }
 }

Пожалуйста, оформляйте Ваш код согласно правилам.


не помогло(((

[Nika2112]

Получилось убрать полосы? У меня та же проблема была. Полосы и чёрные и белые. jQuery вообще на 25% экрана отображается и грузиться секунд 40. Если убрали полосы, то подскажите КАК?!

[Alex11223]

Причем тут jQuery и белые полосы?

[Nika2112]

jQuery я написала, потому пробовала запускать с помощью плагина background. Вообще получается бред.
А белые полосы (примерно 5px) со всех сторон хотя задано:

.is_overlay{ display: block; width: 100%; height: 100%; }
#trailer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}

#trailer > video {
min-width: 100%;
min-height: 100%;
width: auto; height: auto;
}

Вообще уже не понимаю как их убрать.

[Alex11223]

Сторон чего? Откройте DevTools (F12) и посмотрите откуда они.

[Nika2112]

Спасибо за помощь! Уже разобралась.