opencart 2.2 как сделать чтобы видео отображалось как всех браузеров.

Asmadian · 20 лютого 2019

Добрый день,

Не могу понять какой нужно написать код для html. Чтобы вывести видео с ютуба.

А) Если через ifream тогда можно получить такое

Б) Хотел бы чтобы видео не грузила страницу (Запускалась только по клику самого видео)

В) Чтобы размер видео менялся в зависимости от через что сморить пользователь, комп, ноут или смартфон.

Можно конечно поставить этот модуль - "Видео в товара", но утяжелит ваш сайт, значит увеличится

размер структуры DOM.

WOrmy · 20 лютого 2019

https://www.youtube.com/watch?v=jIJIYvM4cJw

В первом случае ссылка на видео, во втором как её нужно добавлять в описание (к примеру).

Всё должно работать без ошибок.

Змінено 20 лютого 2019 користувачем WOrmy

ibond · 20 лютого 2019

HTML:

<div id="video">
	<div class="videoWrapper">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/Zph3K-----" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
  	</div>
</div>

CSS:

#video {
    max-width: 560px;
    margin: 0 auto;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Asmadian · 20 лютого 2019

Странно я использовал такой код - <iframe width="497" height="347" src="https://www.youtube.com/embed/код видео" frameborder="0" allowfullscreen=""></iframe> когда смотрел на вебвизор (метрика), там заметил у не которых смартфонов плоха с ifream

Asmadian · 20 лютого 2019

10 минут назад, ibond сказал:

HTML:


<div id="video">
	<div class="videoWrapper">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/Zph3K-----" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
  	</div>
</div>

CSS:


#video {
    max-width: 560px;
    margin: 0 auto;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Спасибо, завтра буду тестировать

ibond · 20 лютого 2019

1 минуту назад, Asmadian сказал:

у не которых смартфонов

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

Asmadian · 20 лютого 2019

Наше цель сделать так чтобы видео работал во всех браузеров. а не просто сказать что у них урезанный браузер, который не поддерживает iframe.

Видео очень мощный инструмент для мотивации покупателя на действия (покупку товара или еще что то ). Поэтому это должно стать вашим преимуществом для вашего сайта, покупатель сможет посмотреть на вашем сайте, а на сайте конкурентов нет.

Змінено 20 лютого 2019 користувачем Asmadian
Опечатка

ibond · 20 лютого 2019

11 минут назад, Asmadian сказал:

Наше цель сделать так чтобы видео работал во всех браузеров.

Тогда откажитесь от java, bootstrap и других прелестей, уменьшите за одно DOOM и оставьте <body><ul><li>video</li></ul></body>

Ведь я могу сидеть под Windows 3.x и пользоваться Netscape Navigator!

Asmadian · 20 лютого 2019

Согласен, с вами должна быть грань.

Вхід

opencart 2.2 как сделать чтобы видео отображалось как всех браузеров.

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information