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


Видео На Главной


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

#1 bx16

bx16

    Продвинутый пользователь

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

Отправлено 15 Ноябрь 2016 - 14:37

Доброго дня, возникла необходимость, ну или желание))) за место картинки на главной поставить видео с автозапуском, такое вообще возможно?

#2 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 15 Ноябрь 2016 - 14:42

Просмотр сообщенияbx16 (15 Ноябрь 2016 - 14:37) писал:

Доброго дня, возникла необходимость, ну или желание))) за место картинки на главной поставить видео с автозапуском, такое вообще возможно?

Возможно, но для этого Вам нужно взять код видеоролика с автозапуском на видеохостинге (например youtube) и в шаблоне HTML заменить:
<div id="owl-one-slider" class="owl-carousel owl-theme">
								<div class="item">
									<a href="#" target="_blank">
										<img src="http://antrassia.storeland.net/1.jpg?3171" alt="Описание слайда">
								   
									</a>
								</div>
								<div class="item" style="display:none">
									<a href="#" target="_blank">
										<img src="http://antrassia.storeland.net/Lasius-flavus-1.jpg?3115" alt="Описание слайда">
									</a>
								</div>
								<div class="item" style="display:none">
									<a href="#" target="_blank">
										<img src="http://antrassia.storeland.net/Messor%20structor.jpg?3770" alt="Описание слайда">
									</a>
								</div>
							</div>
							<script type="text/javascript">
							  $(document).ready(function() {
								$("#owl-one-slider .item").css('display', 'block');
								$("#owl-one-slider").owlCarousel({
								  navigation : true, // показывать кнопки next и prev
								  slideSpeed : 300,
								  paginationSpeed : 400,
								  items : 1,
								  itemsDesktop : false,
								  itemsDesktopSmall : false,
								  itemsTablet: false,
								  itemsMobile : false,
								  navigationText: false // Удаляет текст с кнопок навигации
								});
							  });
							</script>
							<style type="text/css">
							  #owl-one-slider img {
								width: 100%;
							  }
							  #owl-one-slider .owl-wrapper-outer {
								max-width: 100%;
							  }
							  #owl-one-slider {
								margin-bottom: 11px;
							  }
							   #owl-one-slider .owl-prev, #owl-one-slider .owl-next {
								background-position-y: -2px;
								background-color: rgba(255, 255, 255, 1);
								height: 30px;
								top: 44%;
							  }
							  #owl-one-slider .owl-prev {
								background-position-x: -280px;
								background-position-y: -1px;
							  }
							  #owl-one-slider .owl-next {
								background-position-x: -315px;
							  }
							 
							</style>

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

#3 bx16

bx16

    Продвинутый пользователь

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

Отправлено 15 Ноябрь 2016 - 14:49

посмотрел что там можно взять, есть вот такой код <iframe width="1280" height="720" src="https://www.youtube.................." frameborder="0" allowfullscreen></iframe>
Такой подойдет?  правда где там автозапуск включить или нет, так и не нашел.

#4 Razon

Razon

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

  • Модератоpы
  • 321 сообщений

Отправлено 15 Ноябрь 2016 - 15:02

Просмотр сообщенияbx16 (15 Ноябрь 2016 - 14:49) писал:

посмотрел что там можно взять, есть вот такой код <iframe width="1280" height="720" src="https://www.youtube.................." frameborder="0" allowfullscreen></iframe>
Такой подойдет?  правда где там автозапуск включить или нет, так и не нашел.

Да,  код данного вида подойдет.
Для автозапуска добавьте параметр autoplay=1
Пример:
<iframe width="1280" height="720" src="https://www.youtube..................?autoplay=1" frameborder="0" allowfullscreen>

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

#5 bx16

bx16

    Продвинутый пользователь

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

Отправлено 15 Ноябрь 2016 - 15:12

Спасибо, попробую, только вы предлагаете удалить ВСЕ картинки, а можно сделать так что бы остальные картинки сохранились?

#6 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 15 Ноябрь 2016 - 15:17

Просмотр сообщенияbx16 (15 Ноябрь 2016 - 15:12) писал:

Спасибо, попробую, только вы предлагаете удалить ВСЕ картинки, а можно сделать так что бы остальные картинки сохранились?

Если Вы хотите вставить видео внутрь слайдера, то это очень плохо будет работать, во-первых в этом случае видео никто толком не просмотрит, во вторых это будет очень сильно тормозить работу. Лучше тогда вставить gif-анимацию, но и в этом случае сам анимированный слайд совместно с работой слайдера может очень криво работать

#7 bx16

bx16

    Продвинутый пользователь

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

Отправлено 15 Ноябрь 2016 - 16:52

Просмотр сообщенияMikDark (15 Ноябрь 2016 - 15:17) писал:

Если Вы хотите вставить видео внутрь слайдера, то это очень плохо будет работать, во-первых в этом случае видео никто толком не просмотрит, во вторых это будет очень сильно тормозить работу. Лучше тогда вставить gif-анимацию, но и в этом случае сам анимированный слайд совместно с работой слайдера может очень криво работать
Я понял, спасибо, сделал как предложили выше, все отлично работает) без автозапуска!

#8 bx16

bx16

    Продвинутый пользователь

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

Отправлено 19 Ноябрь 2016 - 00:08

Здравствуйте, возникла проблема по поводу видео на главной. На мобильных устройствах не адаптируется не масштабируется, видно только часть!

#9 Vaccina

Vaccina

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

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

Отправлено 19 Ноябрь 2016 - 07:04

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
{% IF index_page %}
					 <iframe width="845" height="475" src="https://www.youtube.com/embed/gL-0PiJ4PPs" frameborder="0" allowfullscreen></iframe>
						{% ENDIF %}

замените на:
{% IF index_page %}
<div class="video-responsive">
					 <iframe width="845" height="475" src="https://www.youtube.com/embed/gL-0PiJ4PPs" frameborder="0" allowfullscreen></iframe>
	  </div>
						{% ENDIF %}

Далее зайдите в main.css найдите:
@media screen and (max-width: 1190px) {
	.tabproduct .item-box, .menu-item-box {
		width: 100%;
	}
	.categoriesList .tabproduct, .menu-item {
		margin: 1%;
		/* Ширина блока с товаром*/
		min-width: 140px;
		width: 31%;
	}
}
/* максимальная ширина 1024 */

перед ним вставьте:
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow:hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#10 bx16

bx16

    Продвинутый пользователь

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

Отправлено 19 Ноябрь 2016 - 15:21

Просмотр сообщенияVaccina (19 Ноябрь 2016 - 07:04) писал:

Зайдите в раздел Сайт
Спасибо!

#11 bx16

bx16

    Продвинутый пользователь

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

Отправлено 27 Январь 2017 - 00:12

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

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

  • ошибка ютуб.png


#12 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 27 Январь 2017 - 15:59

Просмотр сообщенияbx16 (27 Январь 2017 - 00:12) писал:

Здравствуйте, задам вопрос тут, что бы новую тему не создавать.
Выскочила какая то ошибка на виджете ютуба, что где поломалось?
Здравствуйте, на данный момент проблем с отображением виджета не наблюдаю. Уточните актуален ли  вопрос?

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

  • QIP Shot - Screen 1093.png


#13 bx16

bx16

    Продвинутый пользователь

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

Отправлено 28 Январь 2017 - 22:49

Нет, спасибо, так и не понял что это было, ничего не трогал!




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

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