⇧ Как вставить youtube видео во всплывающее окно без плагинов

Опубликовано: 01.09.2018

Как вставить youtube видео во всплывающее окно без плагинов

Как вставить youtube видео на свой сайт многие, естественно, знают. Видео контент дело популярное, так что, процедуру приходится проводить регулярно. Думаю, не надо особо расписывать подробности этого дела. На странице с видео на youtube есть заметная надпись Поделиться , затем выбираем HTML-код , настраиваем нужный размер и получаем код, который и вставляем в нужное место на своём сайте. Справится любой, даже самый начинающий сайтостроитель.

Вставляем youtube видео на сайт

Другое дело, когда на страницу надо вставить несколько видео роликов с youtube. Если вставлять обычным образом, то страница будет загружаться довольно долго, и тут лучше воспользоваться, так называемыми, всплывающими окнами. Вставить youtube видео во всплывающее окно можно разными способами, парочку из которых я уже описывал в статьях Видео плеер для сайта Video Lightbox и Фотогалерея prettyPhoto–код и плагин для WordPress .

И вот, в один прекрасный момент, решил я написать статью о замечательной программе Adobe Muse. Да и не просто написать, а разместить много видео роликов по работе с программой, чтобы любому было сразу понятно, что и как надо делать. Действительно, интересная программа, сайты можно делать в удобном визуальном редакторе, сам процесс создания сайта больше напоминает увлекательную игру на развитие фантазии.

Статью подготовил, ролики нашел, дошло дело до размещения. Естественно, вставлять youtube видео надо через всплывающие окна, иначе страница будет грузиться очень долго. Самый простой способ – это скрипт prettyPhoto . Как подключать, я уже писал, а к ссылочку надо просто добавить rel=»prettyPhoto». Реализуется просто, что получилось — можно посмотреть на этом примере:

Вставляем youtube видео во всплывающее окно с плагином prettyPhoto

Результат получился приличный, всё открывается, рамочка симпатичная, можно поделиться роликом в соц. сетях. Но, такой подход для нормального освоения программы никак не подходит. Окошечко получается весьма небольшим, нет возможности его увеличить, или развернуть на полный экран (это для Google Crome, в остальных браузерах развернуть на полный экран можно). Для нормального просмотра, есть только один вариант – переход на сайт youtube, что, сами понимаете, не есть хорошо, как и для пользователя, так и для, так популярных, нынче, поведенческих факторов. Посетитель сразу уходит, и, совсем не факт, что у него появится желание вернуться к статье. ????

Пробуем другой вариант. Вставляем youtube видео во всплывающее окно через программу VideoLightbox . Благо, она всегда под рукой, роликов накидать не сложно, да и оформление у всплывающих окон получается довольно симпатичное. Что и сделал.

На тестовой странице всё открывалось и подгружалось замечательно. А вот на этом сайте появились глюки. Не захотел скрипт корректно работать с моим шаблоном. Что-то у  них там, между собой не заладилось. Либо видео открывается корректно, но пропадает некоторый функционал сайта. Либо наоборот, в шаблоне всё работает, но видео раскрывается сразу на весь экран, без возможности управления. Такой вариант, естественно, также не подходит.

И вспомнился мне, старый добрый скриптик, который открывает ссылку в новом окне браузера с нужными размерами и расположением. Не помню уже, сколько ему лет, но, до сих пор работает, как часики, не смотря на все модернизации браузеров. Это я сейчас так легко говорю “вспомнился”. Процедура продолжалась дня три, перепробовал кучу вариантов и подходов.

Скриптик простенький. Никаких дополнительных файлов подключать не надо, всё прописывается прямо в статье.

Вот так выглядит ссылка вставки youtube видео во всплывающем окне:

 

 

< p > < a href = "javascript:doPopup('//www.youtube.com/embed/GAiThZyJ1ZA?rel=0')" title = "Где и как скачать и установить программу Adobe Muse" > Гдеикакскачатьиустановитьпрограмму Adobe Muse < / a > < / p >

 

 

А вот этот код надо добавить в самом низу статьи, естественно, не в визуальном редакторе, а в режиме Текст:

 

 

<script language = "javascript" >   

function doPopup ( popupPath ) {   

window . open ( popupPath , 'name' ,   

'width=550,height=550,scrollbars=NO,left=350,top=100' ) ;   

}   

</script>

 

 

Обращаю ваше внимание на то, какую ссылку вставлять. Если вставить ту ссылку, которая предлагается в разделе Поделиться, то, в этом случае в новом окне откроется вся страница с канала youtube. Если вы хотите показывать только сам ролик, ссылку надо вырезать из раздела HTML-код. Вот тогда вы увидите только видео ролик.

Вырезаем нужный код для вставки

С этим скриптом, конечно, нет красивой рамки у всплывающего окна. Простой браузер. Но, зато, просматривать ролики, особенно если их много, намного удобнее.

Размеры окошка легко меняются. Корректно работает разворачивание на весь экран. Всё легко, удобно, а, главное, никаких дополнительных файлов.

Дополнительные настройки показа видео с youtube

При желании, можно немного поиграться с режимами показа ваших видео.

Как вы уже заметили, в коде для вставки, после идентификатора идет знак вопроса и значение ?rel=0. Тем самым включается параметр, запрещающий показ похожих видео после окончания просмотра. Есть ещё несколько параметров, которые могут вам пригодиться при вставке youtube видео на свой сайт:

autoplay=1 – ролик будет воспроизводится сразу после открытия окна, или загрузки страницы. Если поставить ноль, для воспроизведения надо будет нажимать кнопочку Play. fs=1 – даёт возможность разворачивать видео на полный экран. Значение ноль – запрещает. start=N – можно указать количество секунд N, после которых начнётся воспроизводиться ролик. showinfo=0 – можно убрать всплывающее название ролика в верхней части ролика. modestbranding=1 – убирает логотип со ссылкой от youtube. controls=0 – можно убрать панель контроля за воспроизведением в нижней части ролика.

Первый параметр в ссылке вставляется через знак вопроса ? , все остальные, через амперсант & .  Вот пример кода, где я отключил похожие видео, сделал автоматическое воспроизведение, и убрал логотип youtube:

‘//www.youtube.com/embed/GAiThZyJ1ZA?rel=0&autoplay=1&modestbranding=1’

Вот так можно вставить youtube видео во всплывающее окно безо всяких плагинов, дополнительных файлов и, естественно, без увеличения скорости загрузки страницы. Простенько, понятно, и стабильно работает. Может, кому и пригодится.

Всем Удачи!

Этот сайт работает на быстром, надёжном, не дорогом хостинге GIGAHOST

rss