так и заморачиваться нечего )) В интернете по запросу video background css находится множество статей. Так же по запросу видеофон для сайта тоже есть что почитать. Если с конвертацией файлов не охото заморачиваться, добавляем в запрос поиска слово ютубе Все вроде достаточно просто...
В html вставил код и в css видео залил на хостинг и итог черный фон за место видеофона? Видео на хостинге прописалось как *тхт. Или мне надо видео на ютуб сначало выложить, а после в футере в коде ссылками выставить, чтобы видеофон заработал? Правильно??? Либо в корень сайта надо вставить видео плеер какой-нибудь?
Вообщем перепробывал что мог, на локалке проигрывает , а на опенкарте не хочет. С ютуба делал, тоже ноль.
все работает. Видимо что то неправильно сделали. Конфликт библиотек итд. Если напишите по шагам что сделали, может и будет решение. А так уповать на случай.. не выйдет.
Вставил в хеадер.тпл вот этот код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Video</title> </head> <body> <video id="video_bg" autoplay="autoplay" loop="loop"> <source src="video/background.mp4" type="video/mp4"></source> <source src="video/background.webm" type="video/webm"></source> </video> </body> </html> В css вот такой: body { /* Задаем фон для нашей страницы в виде обычного изображения. Это нужно на случай, есть браузер не смог воспроизвести видео из-за того, что он не поддерживает тег video. */ background: fixed url(images/video_bg.jpg) no-repeat; background-size: cover; } #video_bg { /* Делаем так, чтобы видеофон занимал фиксированное положение. */ position: fixed; top: 0; left: 0; /* Располагаем наш фон под всем содержимым на странице. Для этого используем отрицательный z-index. */ z-index: -1000; /* Растягиваем видео так, чтобы не было видно черных полос и чтобы независимо от разрешения экрана видеофон занимал все рабочее пространство. */ min-width: 100%; min-height: 100%; width: auto; height: auto; } @media (min-aspect-ratio: 16/9) { #video_bg { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { #video_bg { width: 300%; left: -100%; } } @supports (object-fit: cover) { #video_bg { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } } Два видеофона есть скаченных mp4 , webm.
с путями что то напутали видимо. Где лежат файлы? Смотрели в фаербаге на закладке сеть, находит ваши видео файлы?? Только не пишите "я не знаю как". Вам уже много раз про это писали, что нужно почитать.
неа ненаходит, скорей хостинг не видит закаченные на него видео (прописались как тхт), надо как я понял ссылками выставлять.
глупости. Для видеофона без разницы какой движок. Если у вас проблемы с путями к файлам, пользуйтесь примерами с видеофоном с ютубе.
Ну емаё... это похоже на нытьё, уж извините. Когда в интернете тысяча инструкций, вы не по одной не можете/нехотите сделать? Вы даже не постарались код как положено оформить в вопросе, какое тут вообще старание??? Я вот например с первой попавшейся сделал. http://smartlanding.biz/video-na-fon-saita.html http://www.seanmccambridge.com/tubular/ Вставил в header.tpl строки Код: <script src="catalog/view/javascript/jquery/jquery.tubula/js/jquery.tubular.1.0.js" type="text/javascript"></script> <script src="catalog/view/javascript/jquery/jquery.tubula/js/index.js" type="text/javascript"></script> Закинул скрипт в папку \catalog\view\javascript\jquery В index.js поставил ид своего видео и контейнера Работает!
Всё заработало, а скрипт я ставил всё в стайлшит. Вам респект, благодарю... Вот бы самому научиться кодироваться))?
Подскажите, чтобы на смартфонах которые не поддерживают видеофон , надо ведь фон в виде картинки вставить. Это путь в stylesheet.css: body { background: fixed url(images/video_bg.jpg) no-repeat; background-size: cover; } ?
