Видео На Главной
#1
Отправлено 15 Ноябрь 2016 - 14:37
#2
Отправлено 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
Отправлено 15 Ноябрь 2016 - 14:49
Такой подойдет? правда где там автозапуск включить или нет, так и не нашел.
#4
Отправлено 15 Ноябрь 2016 - 15:02
bx16 (15 Ноябрь 2016 - 14:49) писал:
Такой подойдет? правда где там автозапуск включить или нет, так и не нашел.
Да, код данного вида подойдет.
Для автозапуска добавьте параметр autoplay=1
Пример:
<iframe width="1280" height="720" src="https://www.youtube..................?autoplay=1" frameborder="0" allowfullscreen>
Прошу обратить внимание, что параметр указывается в конце ссылки после знака ? если он есть, если нет, то добавьте его в конце ссылки.
#5
Отправлено 15 Ноябрь 2016 - 15:12
#6
Отправлено 15 Ноябрь 2016 - 15:17
bx16 (15 Ноябрь 2016 - 15:12) писал:
Если Вы хотите вставить видео внутрь слайдера, то это очень плохо будет работать, во-первых в этом случае видео никто толком не просмотрит, во вторых это будет очень сильно тормозить работу. Лучше тогда вставить gif-анимацию, но и в этом случае сам анимированный слайд совместно с работой слайдера может очень криво работать
#7
Отправлено 15 Ноябрь 2016 - 16:52
MikDark (15 Ноябрь 2016 - 15:17) писал:
#8
Отправлено 19 Ноябрь 2016 - 00:08
#9
Отправлено 19 Ноябрь 2016 - 07:04
{% 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%; }
#12
Отправлено 27 Январь 2017 - 15:59
bx16 (27 Январь 2017 - 00:12) писал:
Выскочила какая то ошибка на виджете ютуба, что где поломалось?
#13
Отправлено 28 Январь 2017 - 22:49
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных