Правой кнопкой мыши щелкаем на стрелочку «воспр»или «пауза». В выпадающем меню выбираем «Копировать HTML код».
С недавних пор все немного изменилось у них. Одно время, «встроить» было спрятано за «поделиться» Теперь можно проще.
Вы знали?
Метки: упорядочиваем, хинт
Последние записи в этом журнале
OUTSTANDING XL PERFECT MAGIC 2
I’LL BE BACK
ГОТОВЬ ВАННУ ЛЕТОМ: ИСТОРИЯ И 2 ВОПРОСА НА НАХОДЧИВОСТЬ
промо with_art january 8, 2016 13:07 22
Информация об этом журнале
- Цена размещения 60 жетонов
- Социальный капитал 36
- В друзьях у
- Длительность 24 часа
- Минимальная ставка 60 жетонов
- Посмотреть все предложения по Промо
АДЕКВАТНОЙ ПЯТНИЦЫ. Не силен молить, но принимать помощь, Замудрено клянчить зачем, итак овощ, Это не бездушие, только лишь усталость, Печально быть слабым, но губит слабость. Сбитый с пути 2015 — Видно, мир изменился. — Нет. Все как раньше. Слабым…
Как добавить видео с ютуба на сайт HTML?
Источник: with-art.livejournal.com
Включить видео с youtube после нажатия на кнопку или элемент
Суть задачи такая — запустить видео по нажатию на какой-то элемент. Самый простой вариант — нажать кнопку и запустить видео. В своем примере я немного усложню задачу, добавятся лишние стили немного больше кода, но если разобраться в коде и логике, то можно будет легко его упростить или переделать.
Вариант 1 — Видео в одном блоке, картинка над видео, после нажатия на картинку видео включается, а картинка прячется
Этот вариант удобен тем, что можно в блок с видео загрузить любое видео, любой фрейм.
Код HTML
Есть общий контейнер, внутри видео и над ним картинка.
Код Javascript
После нажатия на картинку, изображение пропадает, а к видео-фрейму добавляется атрибут (function initPlayVideo() < var $videoCover = $(«.f-video-cover»); var $videoPlayerIframe = $(«.f-video-player iframe»); $videoCover.on(«click», function () < $videoCover.fadeOut(); $videoPlayerIframe[0].src += «; >); >)(); >);
Код CSS
Для блока с видео задаются стили адаптивности, чтобы видео адаптировалось к контейнеру любой ширины
.f-video-container < position: relative; display: block; width: 560px; >.f-video-player < position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; >.f-video-player iframe, .f-video-player object, .f-video-player embed < position: absolute; left: 0; top: 0; height: 100%; width: 100%; >.f-video-cover
Рабочий пример запуска видео по клику — Нажмите на картинку
Вариант 2 — После нажатия на картинку видео вставляется в блок, а картинка пропадает.
Этот вариант лучше тем, что при загрузке страницы никакие скрипты с yotube не подгружаются, но код самого скрипта становится сложнее, и менее кастомизированным, более шаблонным.
Код HTML
Блок для видео пустой ,в него потом будет загружено видео. Обложка видео .f-video-cover расположена над контейнером для видео.
В коде добавлен дата-атрибут data-video для блока .f-video-cover — это нужно, чтобы шаблонизировать данный код, например, чтобы можно было выводить код видео с помощью какого-нибудь кастомного поля в шаблоне.
Код Javascript
После нажатия на картинку, она пропадает, а в контейнер для видео .f-video-player загружается видео-фрейм.
В скрипте уже прописана заготовка для видео с youtube, в которую только подставляется ID видео
jQuery(document).ready(function ($) < (function initPlayVideo() < var $videoCover = $(«.f-video-cover»); var $videoPlayer = $(«.f-video-player»); var $videoUrl = $(«.f-video-cover»).data(«video»); $videoCover.on(«click», function () < $videoCover.fadeOut(); $videoPlayer.html( ‘
‘ ); >); >)(); >);Код CSS
Для блока с видео задаются стили адаптивности, чтобы видео адаптировалось к контейнеру любой ширины
.f-video-container < position: relative; display: block; width: 560px; >.f-video-player < position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; >.f-video-player iframe, .f-video-player object, .f-video-player embed < position: absolute; left: 0; top: 0; height: 100%; width: 100%; >.f-video-cover
Рабочий пример запуска видео по клику — Нажмите на картинку
Примеров может быть множество. В данном случае рассмотрел удобные для определенной задачи.
Если на странице должно быть несколько блоков с видео,
тогда нужно немного изменить скрипт, если у вас другая верстка, то подкорректировать этот скрипт под свою верстку, главное — понять логику
jQuery(document).ready(function ($) < (function initPlayVideo() < $(«.f-video-cover»).on(«click», function () < $(this).fadeOut().siblings(‘.f-video-player’).html( ‘
‘ ); >); >)(); >);В общем, развернутый локальный сервер, запущенный на Node, пришлось закрыть без остановки, и после этого…
Постоянно приходится вспоминать как повесить правильную ссылку на чат скайпа или вайбера. Давно уже пора…
Тема не новая, просто хочу вынести пример мобильного меню, который я использую чаще всего. На…
Полезный инструмент, чтобы быстро перевести много небольших текстов на разные языки с помощью Google Sheets…
Источник: denis-creative.com
Как вставить видео на сайт
Почему-то у многих новичков часто возникает вопрос: «Как вставить видео на сайт?». И я решил написать об этом небольшую статью, чтобы ответить на их вопрос.
Начнём с того, что существует два способа вставки видео на сайт: с видеосервиса (например, с Youtube, Rutube и других) и просто с обычного видеофайла, который может располагаться на любом сайте.
Первый способ очень простой. Вам достаточно всего лишь зарегистрироваться в одном из видеосервисов, залить видео на их сайт и получить код видео. Дальше этот код Вы просто вставляете в любое место на Вашей странице. Должно получиться что-то наподобии этого:
Лучшее видео недели!
Тут всё просто, и Вам совсем не надо разбираться, что там понаписано.
А вот второй способ немного сложнее. Тут Вам потребуется скрипт плеера, который будет Ваше видео проигрывать, и SWF-файл плеера. Существует много различных плееров, но мне понравился FlowPlayer (скачать FlowPlayer). Теперь посмотрим, как его установить и как с его помощью добавить видео на сайт.
Первым делом разархивируйте архив на Ваш сайт, например, в папку «flowplayer». Далее Вы должны в теге head> страницы, на которую будет добавлено видео, написать следующую строку:
После этого на странице нужно добавить такие строки:
Вот и всё! Видео успешно добавлено на Ваш сайт. И Вы теперь не зависите от работоспособности видеохостингов, а зависите только от работоспособности Вашего сайта. Более того, никакой посторонней рекламы видеохостингов Ваши пользователи не увидят. Однако, в этом способе добавления видео есть один серьёзный минус: ОЧЕНЬ большая нагрузка на сервер.
Если это видео смотрит 5 человек в день, то проблем не будет, а если смотрят 20 человек одновременно, то ничего кроме злости Вашего посетители не испытают. Но выход из этого положения есть: использовать сторонный сервис хранения файлов, например, Amazon S3, о котором я расскажу в одной из следующих статей, так что не переключайтесь.
Если Вы хотите узнать больше по HTML, то посмотрите бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html
Создано 27.01.2011 16:33:58
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 230 ):
XAXATyH2007 16.03.2011 03:10:13
Не пойму 2 способ делаю музыка вроде есть а не видно клипа. Белый экран
Admin 16.03.2011 08:34:15
Покажите код, как Вы вставляете клип.
Источник: myrusakov.ru