Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 16.04.2017, 00:00   #1
каток
 
Регистрация: 15.04.2017
Сообщений: 3
Смущение Не могу убрать черные полосы видеофона сайта

Здравствуйте, пишу сайт на вордпресс, первый раз вставляю видео фон, хотела на всю ширину сайта, но при маштабировании видео убегает, оставила не на всю ширину,к тому же в любом варианте выходят черные полосы, не могу их убрать , помогите пожалуйста и если можно подскажите еще как сделать на всю ширину, не меняя высоту. мой сайт 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; 16.04.2017 в 00:16.
каток вне форума Ответить с цитированием
Старый 16.04.2017, 00:07   #2
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Цитата:
Сообщение от каток Посмотреть сообщение
к тому же в любом варианте выходят черные полосы, не могу их убрать , помогите пожалуйста и если можно подскажите еще как сделать на всю ширину, не меняя высоту
если размер страницы отображаемой в вашем браузерe не пропорционален размеру видео, то никак вроде.

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

Хотя не, уже вроде есть object-fit, но не везде.
http://caniuse.com/#search=object-fit
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.

Последний раз редактировалось Alex11223; 16.04.2017 в 00:13.
Alex11223 вне форума Ответить с цитированием
Старый 16.04.2017, 09:12   #3
каток
 
Регистрация: 15.04.2017
Сообщений: 3
По умолчанию

попробовала рикрепить
Код:
 @supports (object-fit: contain
) {
     #trailer > video {
         top: 0; left: 0;
         width: 100%; height: 100%;
         object-fit: contain
;
     }
 }
не помогло, а у людей же получается вставить видеофон без черных полос, может дело в видео.а если поменять видео с форматом 16 на9.

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

Последний раз редактировалось Alex11223; 16.04.2017 в 10:14.
каток вне форума Ответить с цитированием
Старый 16.04.2017, 10:13   #4
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Дык fill, а не contain.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 16.04.2017, 11:20   #5
каток
 
Регистрация: 15.04.2017
Сообщений: 3
По умолчанию

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


Код:
/*
.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;
     }
 }

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


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

Последний раз редактировалось Вадим Мошев; 16.04.2017 в 13:55.
каток вне форума Ответить с цитированием
Старый 07.05.2017, 22:10   #6
Nika2112
Новичок
Джуниор
 
Регистрация: 07.05.2017
Сообщений: 3
По умолчанию

Получилось убрать полосы? У меня та же проблема была. Полосы и чёрные и белые. jQuery вообще на 25% экрана отображается и грузиться секунд 40. Если убрали полосы, то подскажите КАК?!
Nika2112 вне форума Ответить с цитированием
Старый 07.05.2017, 22:15   #7
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Причем тут jQuery и белые полосы?
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 07.05.2017, 22:30   #8
Nika2112
Новичок
Джуниор
 
Регистрация: 07.05.2017
Сообщений: 3
По умолчанию

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;
}

Вообще уже не понимаю как их убрать.
Nika2112 вне форума Ответить с цитированием
Старый 07.05.2017, 22:49   #9
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Сторон чего? Откройте DevTools (F12) и посмотрите откуда они.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 07.05.2017, 23:13   #10
Nika2112
Новичок
Джуниор
 
Регистрация: 07.05.2017
Сообщений: 3
По умолчанию

Спасибо за помощь! Уже разобралась.
Nika2112 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Убрать заголовок сайта из категорий linksm WordPress и другие CMS 2 12.09.2014 12:14
Как убрать полосы и выбеленные фрагменты? elena1704 Microsoft Office Word 7 04.04.2013 12:28
Убрать Flash заставку сайта. Tema-deep HTML и CSS 2 25.07.2012 12:47
как убрать горизонтальные полосы прокрутки при просмотре в андроид? Алик09 HTML и CSS 11 05.03.2012 10:03
Пользователь запретил приглашать себя в приложения", сколько не парился никак не могу убрать. Как убрать? nigretos Свободное общение 3 10.06.2011 15:48