Есть ли способ разместить фоновое видео в контейнере div с эффектом параллакса? То, что я ищу, похоже на этот шаблон:
Нажмите здесь, чтобы увидеть пример
Я попробовал несколько популярных плагинов, которые нашел в Интернете, например:
Но ни один из них не делает то, что я ищу, или, может быть, они делают, но я просто не мог понять это :(
Спасибо вам всем!!
Существует плагин, который делает именно то, что вам нужно: https://github.com/linnett/backgroundVideo.
Я бы сначала создал элемент div с видео HTML5, а затем создал прокрутку параллакса. Добавить видео HTML5 и сделать его полной ширины можно так же просто, как:
<video id="myVideo" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<script>
document.getElementById("myVideo").width=document.body.offsetWidth;
</script>
Для параллакса вам нужно будет реализовать это отдельно. Элемент div с видео HTML5 будет просто компонентом страницы, как и любой другой слой или раздел контента.
Если вам нужны руководства по созданию веб-сайтов с параллаксом, моя компания создала список доступных веб-сайтов с параллаксом (отсортированных по технологиям: jQuery, stellar.js и skrollr.js). http://potentpages.com/parallax-tutorials/
Справочник Mozilla по видео HTML5: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
На всякий случай, если вы все еще ищете решение с помощью YTPlayer. Установите containment:'self' или containment:'#elementID' в конструкторе HTML, где #elementID – это идентификатор раздела div, section или параллакса, в котором вы хотите, чтобы видео воспроизводилось в фоновом режиме.
См. вики-страницу YTPlayer здесь.
<div id="P1" class="player"
data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'self',startAt:50,mute:false,autoPlay:false,loop:false,opacity:.8}">
</div>
