Пара примеров как сделать блок с адаптивным видео в качестве фона на основе видеоплеера HTML5, YouTube и JQuery.
HTML5 video
Воспроизведение локального видео-файла с помощью элемента :
У тега атрибуты autoplay и loop запустят видео с повторением, muted отключит звук, controls=»» – скроет элементы управления.
Далее разместим блоки с видео и контентом друг над другом и добавим затемнение видео с помощью :before и opacity: 0.5 .
CSS:
.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
Теперь нужно пропорционально растянуть и отцентровать видео по родителю. Чаще всего видео имеет соотношение сторон 16:9, поэтому используем его для расчета новой ширины или высоты:
16 / 9 = 1.78
new_height = width / 1.78 или new_width = height * 1.78
Как вставить видео на сайт html с youtube
JQuery:
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); >);
Источник: snipp.ru
Как вставить видео с YouTube на сайт без плагина
Здравствуйте, уважаемые друзья. Как вставить видео с YouTube на сайт, без плагина? Этот вопрос мне стали задавать после того, как я рассказал о вставке видео в виде галереи на страницах сайта.
От того, какие вы ставите задачи, зависит выбор способа добавления видео с канала YouTube на сайт. Если вам нужно красиво представить видео из плейлиста, то это, безусловно, стоит сделать через плагин.
Если же, вы хотите вставить один или два видеоролика, то это можно сделать без плагина. Достаточно выбрать нужный ролик и далее вставить небольшой код со ссылкой на него. Всё просто я лишь поделюсь своей схемой и технической фишкой для WordPress, которая позволяет вставлять видео в статьи по нажатию одной кнопки.
Как создать кнопку «Видео» в редакторе WordPress.
Итак, для упрощения процедуры вставки видео в статьи я использую кнопку «Видео», которую добавил в текстовый редактор WP.
Суть заключается в том, что основа кода вставляется по нажатию этой кнопки, остаётся лишь добавить индивидуальный код видео.
А теперь давайте обо всём по порядку.
Внимание: перед работой с файлом functions.php – сделайте его резервную копию.
Для того чтобы кнопка появилась у вас в редакторе, вам необходимо вставить вот этот код в функции темы (functions.php):
/*вставка в редактор кнопки видео*/ add_action(‘admin_footer’, ‘eg_quicktags’); function eg_quicktags() < ?> jQuery(document).ready(function()< if(typeof(QTags) !== ‘undefined’) < QTags.addButton( ‘youtube’, ‘Видео’, ‘‘); > >);
В каком месте вставлять код.
Для того чтобы ничего не сломать, код необходимо вставлять в самом конце файла. Как правило, последний элемент кода в этом файле – это закрытие php (?>). Если у вас есть такой (?>), значит, вставляйте код кнопки выше его. А ещё лучше удалите его и вставьте код кнопки.
Пояснения по коду.
Оранжевым цветом обозначены те элементы, которые вы меняете под свой сайт. А, точнее, название кнопки, ширину и высоту плеера.
Сохраняем файл и переходим к внедрению видео в статьи.
Как вставить видео с YouTube с помощью кнопки.
Первым делом выбираете видео для вставки на канале YouTube. У каждого видео есть индивидуальный код. Посмотреть его можно в адресной строке браузера. Именно этот код вы выделяете и копируете в буфер обмена (CTRL+C).
Далее, открываете статью на сайте, переводите редактор в режим «Текст», устанавливаете курсор в нужном месте и нажимаете на кнопку «Видео». Теперь устанавливаете курсор, сразу после embed/ вставляете код видео (CTRL+V).
На этом вся процедура вставки видео с YouTube без плагина окончена. Можете сохранять статью и публиковать.
Как вставить видео без кнопки и без плагина.
И напоследок, для тех, кто не хочет использовать кнопку или у кого сайт создан не на WordPress, есть ещё один простой способ вставить видео с канала Ютуб.
Для этого вам потребуется открыть видео на канале Ютуб. Под видео есть кнопка «Поделиться» — нажимаете на неё – далее, на закладку «HTML–код». Ниже появится код для вставки на сайте.
Вы его копируете и вставляете на сайте. Если нужно изменить размеры окна плеера, то меняете параметры width и height.
Дополнительные настройки плеера.
Если, это необходимо, то вы можете сделать дополнительные настройки плеера. Для этого нужно после индивидуального кода видео поставить знак вопроса (?) и добавить необходимые настройки:
autoplay=0 – автоматический запуск видео.
start=60 – запуск с 60 секунды, это значение задаётся вами.
showinfo=0 – скрыть верхнюю панель.
controls=0 – скрыть нижнюю панель.
modestbranding=1 – скрыть логотип YouTube.
Первый параметр идёт после знака вопрос (?), а все последующие прибавляются через амперсанд («>?autoplay=0&start=60″ frameborder=»0» allowfullscreen>
Вот такими простыми способами можно вставлять видео в статьи на сайтах и блогах.
А теперь предлагаю вашему вниманию видео по вышеописанным способам, которое тоже вставлено без плагина, но с помощью кнопки «Видео».
На этом у меня сегодня всё. Я желаю вам успехов и хорошего настроения. До встречи в новых статьях и видеоуроках.
P.S. если, вы ещё не создаёте видеоуроки, не размещаете их на Ютубе и не зарабатываете на них, я советую изучить мастер-класс «YouTube Специалист» Александра Новикова. Где вы получите знания и умения и начнёте зарабатывать вместе с YouTube.
Источник: 1zaicev.ru
8 способов хитро вставить видео с ютуб (YouTube)
Здравствуйте, друзья. Все мы используем видеоролики. Кто то для раскрутке своего бренда, кто то просто делится лучшими моментами своей жизни на блоге. В этой статье я расскажу вам как хитро вставить виде с ютуб (YouTube).
1. Отключение нижней панели плеера.
Все вы знаете как выглядит стандартный плеер ютуб.