Прочие возможности “Видео фон”

Видео фон – это популярный элемент дизайна, который позволяет сделать ваш сайт неповторимым.

Для видео фона не предусмотрено отдельного виджета в нашем сервисе, поэтому вставляется он следующим образом.

Шаг 1. Выберите подходящий видео фон в данном сервисе или в любом другом, главное, что бы видео можно было скачать (Не используйте код для вставки с этого сервиса, он с ошибками).

Шаг 2. Скачайте видео и загрузите файл на любой хостинг или файлообменник, где на видео будет прямая ссылка.

Шаг 3. Вставьте виджет с HTML кодом в том место, где должен быть видео фон.

Шаг 4. Вставьте в виджет с HTML следующий код:

                    
<div class="homepage-hero-module">
    <div class="video-container">
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
        <source src="http://pixli.ru/video/4/Hello-World.mp4" type="video/mp4" />
        Your browser does not support the video tag. I suggest you upgrade your browser.
            <source src="http://pixli.ru/video/4/Hello-World.webm" type="video/webm" />
            Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
    </div>
</div>
<script>
    $(document).ready(function () {
        //scaleVideoContainer();
        initBannerVideoSize('.video-container .poster img');
        initBannerVideoSize('.video-container .filter');
        initBannerVideoSize('.video-container video');
        $(window).on('resize', function () {
            //scaleVideoContainer();
            scaleBannerVideoSize('.video-container .poster img');
            scaleBannerVideoSize('.video-container .filter');
            scaleBannerVideoSize('.video-container video');
        });
    });
    function scaleVideoContainer() {
        var height = $(window).height() + 5;
        var unitHeight = parseInt(height) + 'px';
        $('.homepage-hero-module').css('height', unitHeight);
    }
    function initBannerVideoSize(element) {
        $(element).each(function () {
            $(this).data('height', $(this).height());
            $(this).data('width', $(this).width());
        });
        scaleBannerVideoSize(element);
    }
    function scaleBannerVideoSize(element) {
        var windowWidth = $(window).width(),
                windowHeight = $(window).height() + 5,
                videoWidth,
                videoHeight;
        //console.log(windowHeight);
        $(element).each(function () {
            var videoAspectRatio = $(this).data('height') / $(this).data('width');
            $(this).width(windowWidth);
            if (windowWidth < 1000) {
                videoHeight = windowHeight;
                videoWidth = videoHeight / videoAspectRatio;
                $(this).css({'margin-top': 0, 'margin-left': -(videoWidth - windowWidth) / 2 + 'px'});
                $(this).width(videoWidth).height(videoHeight);
            }
            $('.homepage-hero-module .video-container video').addClass('fadeIn animated');
        });
    }
</script>

<style>
    .homepage-hero-module {
        border-right: none;
        border-left: none;
        position: relative;
    }
    .no-video .video-container video,
    .touch .video-container video {
        display: none;
    }
    .no-video .video-container .poster,
    .touch .video-container .poster {
        display: block !important;
    }
    .video-container {
        position: relative;
        bottom: 0%;
        left: 0%;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    .video-container .poster img {
        width: 100%;
        bottom: 0;
        position: absolute;
    }
    .video-container .filter {
        z-index: 100;
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
    }
    .video-container video {
        position: relative;
        z-index: 0;
        bottom: 0;
        opacity: 1.7;
    }
    .video-container video.fillWidth {
        width: 100%;
    }
</style>
                    

Где красным цветом указан путь до файлов с видео. Если файл только в одном формате, ничего страшного просто удалите лишнею строчку.

Примечание:

Местоположение блока с видео лучше настроить в режиме absolute так как он может не корректно сдвигать другие блоки. Если у вас возникли трудности с настройкой видео фона, обратитесь в нашу техническую поддержку.