Видео от YouTube в качестве фона на сайте
В статье узнаете про создание видео фона от YouTube, что будет оригинально смотреться на страницы, так как поверх у нас идет описание на сайте. Как поняли, что будем делать видео в качестве фона, которое безусловно преобразит страницу, так как это смотрится оригинально. Но также многое зависит от самого видео, или от ролика, что и под какой материал статьи его мы будем запускать. Но благодаря YouTube у нас безусловно есть очень большой выбор различного видео формата, даже тематического направление. Недавно, когда проходили следование по этому направлению, где после нескольких экспериментов было выяснено, что при взаимодействии обычного HTML5 и стилистики CSS, вы можете выставить видео с YouTube, которое будет отображать фоновый рисунок на данной странице. Установка: Подключаем библиотеку Код <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> HTML Код <div class="videopos_monedas"> <iframe src="https://www.youtube.com/embed/P5csD0SX8jI?mode=opaque&wmode=transparent&autoplay=1&loop=1&controls=0&modestbranding=1&rel=0&autohide=1&showinfo=0&color=white&iv_load_policy=3&theme=light&wmode=transparent&mute=1&playlist=fGL6ucS9hTI" frameborder="0" allow="autoplay"></iframe> <div class="konegau_videozapes"> <h1>Планетный экспресс</h1> <p>Без сомнения, ведение блога - прибыльный онлайн-бизнес. Многие люди хотят создать блог как средство зарабатывания денег в Интернете. Но в блогах зарабатывание денег зависит от объема трафика, который вы получаете:</p> <ul> <li>Оптимизация сообщений в блогах</li> <li>Советы по привлечению клиентов</li> <li>Топ-10 SEO-приложений</li> <li>Конверсия веб-сайта для SEO?</li> </ul> <p>Спросите любого, кто связан с онлайн-бизнесом, о важности поисковой оптимизации веб-сайтов, и в течение нескольких секунд - или максимум минут - вы хорошо познакомитесь с ее необходимостью в цифровом маркетинге. Короче говоря, SEO имеет значение. Как один из наиболее важных аспектов цифрового маркетинга.</p> </div> </div> CSS Код body { font-size:14px; padding: 15px 20px; } .videopos_monedas { position: relative; overflow: hidden; } .videopos_monedas iframe { position: absolute; top: 0px; left: 0; width: 0; height: 0; z-index: -1; } .konegau_videozapes { position: relative; color: #fff; padding: 50px; font-size: 20px; } .konegau_videozapes:before { z-index: -1; content: ''; position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; } JS Код function setVideoCenter() { var $box = $('.videopos_monedas'); var height = $box.height(); var width = $box.width(); var new_height = width / 1.78; if (new_height > height) { $box.find('iframe').css({ width: width, height: new_height, top: '-' + (new_height / 2 - height / 2) + 'px', left: '0', }); } else { var new_width = height * 1.78; $box.find('iframe').css({ width: new_width, height: height, top: '0', left: '-' + (new_width / 2 - width / 2) + 'px' }); } } $(function(){ setVideoCenter(); $(window).resize(setVideoCenter); }); Вероятно многие согласятся, что эта идея очень интересна, и можно ее красиво обставить по оформлению, как под темный формат сайта, так и под светлый фон. Здесь главное, чтоб видео не сильно балансировало по кадрам, а держалось одним рисунком, где будет происходить анимация в элегантном и эффективном виде. Как сменить видео ролик? В ссылки находим на самом краю P5csD0SX8jI и меняем на тот ролик, который вам нужен виде фона. А как все делается, то на скрене показано, вообщем нам нужно, чтоб видео картинка по умолчанию на весь экран при выключение стала, что делаем. Демонстрация Также есть еще один пример, это как сделать блок с адаптивным видео в качестве фона на основе видеоплеера HTML5, YouTube и JQuery. HTML5 video HTML Код <div class="video-box"> <video autoplay loop muted controls=""> <source src="/video.mp4" type="video/mp4"> </video> <div class="video-content"> Контент... </div> </div> CSS Где у тега video атрибуты autoplay и loop запустят видео с повторением, muted отключит звук, controls="" – скроет элементы управления. Далее разместим блоки с видео и контентом друг над другом и добавим затемнение видео с помощью :before и opacity: 0.5. Код .video-box { position: relative; overflow: hidden; } .video-box video { position: absolute; top: 0px; left: 0; width: 0; height: 0; z-index: -1; } .video-content { position: relative; color: #fff; padding: 50px; font-size: 20px; } .video-content:before { z-index: -1; content: ''; position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; } Остается пропорционально растянуть и безусловно все выставить по центру. Где основном видео имеет соотношение сторон 16:9, и здесь задействуем его для расчета обновленной ширины, а также высоты: 16 / 9 = 1.78 new_height = width / 1.78 или new_width = height * 1.78 JS Код function setVideoCenter() { var $box = $('.video-box'); var height = $box.height(); var width = $box.width(); var new_height = width / 1.78; if (new_height > height) { $box.find('video').css({ width: width, height: new_height, top: '-' + (new_height / 2 - height / 2) + 'px', left: '0', }); } else { var new_width = height * 1.78; $box.find('video').css({ width: new_width, height: height, top: '0', left: '-' + (new_width / 2 - width / 2) + 'px' }); } } $(function(){ setVideoCenter(); $(window).resize(setVideoCenter); }); На этом все, возможно какой то из вариантов вам пригодится для оформление сайта, что можно основном наблюдать на официальный площадках, где вместо фона идет тематическое видео, которое совершенно не мешает читать материал. Что не исключаю наблюдать на игровых сайтах или на вновь созданных страницах, чтоб удивить гостей и пользователей сайта. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 6 | |
| |