Перейти к содержимому


Видео На Фон


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 150

#1 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 10 Август 2015 - 10:43

Добрый день! Подскажите возможно ли вставить видео на фон во всю страницу? Если да, то какой оптимальный вес должен быть чтоб страница быстро прогружалась?

#2 RayLi

RayLi

    Активный участник

  • Модераторы
  • 2 864 сообщений

Отправлено 10 Август 2015 - 10:52

Просмотр сообщенияStas_Y (10 Август 2015 - 10:43) писал:

Добрый день! Подскажите возможно ли вставить видео на фон во всю страницу? Если да, то какой оптимальный вес должен быть чтоб страница быстро прогружалась?

Здравствуйте.
Не советуем вам производить подобные изменения, так как в любом варианте постоянно проигрывающееся видео сильно нагрузит ваш сайт и многим пользователям это не понравится, так как им будет очень сложно производить какие-либо операции на подобном сайте.

#3 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 10 Август 2015 - 12:10

Нет оно будет только на главной странице

#4 RayLi

RayLi

    Активный участник

  • Модераторы
  • 2 864 сообщений

Отправлено 10 Август 2015 - 12:33

Просмотр сообщенияStas_Y (10 Август 2015 - 12:10) писал:

Нет оно будет только на главной странице

И именно на весь задний фон данной страницы и автоматически воспроизводиться при заходе, я вас правильно понял?
Уточните, пожалуйста.

#5 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 12 Август 2015 - 16:18

Нет будет фон а на нем кнопки для перехода на последующие страницы, видео фон только на главной при нажатии на кнопку переходит на страницу уже со стандартной темой. Как пример: http://www.diesel.co...ar/onear-black/

#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 13 Август 2015 - 06:06

В шаблоне HTML перед </body> вставьте:
<video id="video_bg" autoplay="autoplay" loop="loop">
	<source src="video/background.mp4" type="video/mp4"></source>
</video>

вместо video/background.mp4 необходимо вставить ссылку на видео, если формат будет отличаться от примера, то его необходимо также изменить в данном коде в type

Далее зайдите в main.css и последней строкой вставьте:
#video_bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1000;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
}


#7 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 20 Август 2015 - 22:02

Добрый вечер а как вынести видео на передний план?

#8 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Август 2015 - 02:38

Перефразируйте пожалуйста вопрос, выше вы просили его установить фоном, а это уже подразумевает то, что он всегда будет перекрыт контентом и прочим и укажите пожалуйста номер аккаунта, чтобы я смогла просмотреть как он у вас выглядит.

#9 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 21 Август 2015 - 03:41

Хорошо, я перефразирую) как создать пустую страницу, поместить на ее фон видео и в дальнейшем накладывать на видео кнопки меню и переходы?

#10 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Август 2015 - 04:38

В этом случае создаете страницу в разделе Сайт - Страницы, после заполнения страницы в описании нажмите Источник, в самом его начале первой строкой вставьте:
<div id="video">
<video id="video_bg" autoplay="autoplay" loop="loop">
		<source src="video/background.mp4" type="video/mp4"></source>
</video>
</div>

Цитата

вместо video/background.mp4 необходимо вставить ссылку на видео, если формат будет отличаться от примера, то его необходимо также изменить в данном коде в type

А в конец main.css
#video{
position:relative;
}
#video_bg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1000;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
}


#11 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 21 Август 2015 - 05:24

Извините я опять не правильно изъяснился(( я прошу вас посмотреть этот сайт http://www.ovenbits.com/ и тогда будет понятно о чем я прошу! Вообще возможно ли так сделать?

#12 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Август 2015 - 05:30

В этом случае тогда правильна была инструкция #6 выше, по ней видеофон устанавливался бы в начале сайта и блоки шапки и прочие перекрывали бы его, установите по данной инструкции, после этого скорее всего у сторонних блоков достаточно будет убрать фон, чтобы было видно видеофон =)

#13 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 21 Август 2015 - 05:40

Давайте попробуем) видео поставил), как теперь убрать фоны у блоков? аккаунт sl-355094

#14 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Август 2015 - 06:13

Уточните у каких блоков именно необходимо убрать.

Белый фон в шапке, в main.css найдите:
.header-content {
	padding: 0px;
	background: #FFF;
}
замените на:
.header-content {
	padding: 0px;
	background: none;
}

Самая первая серая строка, на которой меню и корзина, в main.css найдите:
.header-top {
	background-color: #F2F2F2;
	height: 50px;
}
замените на:
.header-top {
	height: 50px;
}


#15 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 21 Август 2015 - 07:48

Спасибо все получается))) теперь нужно убрать слайдер! и блоки ниже, подвал сделать тоже прозрачным

#16 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Август 2015 - 08:16

В шаблоне HTML найдите и удалите:
<!-- Запуск слайдера -->
	{% IF index_page %}
	<script>
	  $(function(){ slideShow()});
	</script>
	{% ENDIF %}

<!-- Слайдер на главной -->
		{% IF index_page %}
		<div id="slideshow" class="wrap">
		  <div id="slider">
			<!-- Slides Container -->
			<div u="slides" class="slides_container">
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" />
			  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
			  </div>
			   <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
			  </div>
			</div>
		  </div>
		</div>
		{% ENDIF %}
		<!-- /END Слайдер на главной -->

На счет белой полосы под слайдером, она отвечает за вывод текста и товаров на главной, у вас не будет на главной странице ни того ни другого?

На счет подвала, в main.css найдите:
#footer {
	background-color: #F3F3F3;
	margin-top: 45px;
	padding-top: 40px;
}
.footer-content {
	padding-top: 20px;
	background-color: #444;
	color: #C8C8C8;
}

замените на:
#footer {
	margin-top: 45px;
	padding-top: 40px;
}
.footer-content {
	padding-top: 20px;
	color: #C8C8C8;
}


#17 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 21 Август 2015 - 08:32

Ну давайте ее прозрачной сделаем! Полосу в смысле))

#18 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 21 Август 2015 - 08:41

Вот что необходимо:))) осталось совсем чуть чуть
1) Поменять шрифт обоих меню на белый и пожирнее, а можете пояснить где менять, эт мне еще пригодится)
2) У верхнего меню убрать такие белые черточки как перегородки,  меню пониже сделать прозрачным, как и логотип
3) Корзину с поиском сделать прозрачной и идеале с белой окантовкой

Фото прилагаю!))) Заранее спасибо!

Прикрепленные изображения

  • 1.jpg


#19 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Август 2015 - 08:49

В main.css найдите:
#yt_wrapper .main-inner {
	margin: 0px auto;
	background-color: #FFF;
}

замените на:
#yt_wrapper .main-inner {
	margin: 0px auto;
}

Просмотр сообщенияStas_Y (21 Август 2015 - 08:41) писал:

Вот что необходимо :))) осталось совсем чуть чуть
1) Поменять шрифт обоих меню на белый и пожирнее, а можете пояснить где менять, эт мне еще пригодится)
2) У верхнего меню убрать такие белые черточки как перегородки,  меню пониже сделать прозрачным, как и логотип
3) Корзину с поиском сделать прозрачной и идеале с белой окантовкой

Фото прилагаю!))) Заранее спасибо!
В main.css найдите:
.header-top .header-top-left .top-navbar-links li a {
	padding: 18px 18px 12px;
	display: block;
	font-size: 115%;
}

замените на:
.header-top .header-top-left .top-navbar-links li a {
	padding: 18px 18px 12px;
	display: block;
	font-size: 115%;
	color: #fff;
}

далее найдите:
.header-top .header-top-left .top-navbar-links li {
	float: left;
	border-left: 1px solid #FFF;
	height: 50px;
	background-repeat: no-repeat;
}
замените на:
.header-top .header-top-left .top-navbar-links li {
	float: left;
	height: 50px;
	background-repeat: no-repeat;
}

далее найдите:
#nav li a {
	display: block;
	font-size: 15px;
	line-height: 100%;
	background: #F2F2F2;
	padding: 15px 20px;
	margin: 0px 1px 1px 0px;
	border-radius: 0px;
}
замените на:
#nav li a {
	display: block;
	font-size: 15px;
	line-height: 100%;
	padding: 15px 20px;
	margin: 0px 1px 1px 0px;
	border-radius: 0px;
	colo:#fff;
}

далее найдите:
.header-top .mini-cartpro .block-title {

в данном блоке удалите:
background-color: #F79242;


#20 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 21 Август 2015 - 18:08

Значок поиска, все равно оранжевый((

Скажите вот мы практически сделали страницу приветствия, это очень хорошо и спасибо за оперативность! А как сделать чтобы на всех остальных страницах фон и вся стилистика вернулись в стандартное положение?!




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных