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



Как вставить youtube видео

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

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

Вставка видео с youtube

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

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

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

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

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

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

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

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

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

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

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

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

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

Код для вставки youtube видео

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

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

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

Дополнительные настройки показа видео с 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 видео во всплывающее окно безо всяких плагинов, дополнительных файлов и, естественно, без увеличения скорости загрузки страницы. Простенько, понятно, и стабильно работает. Может, кому и пригодится.

Всем Удачи! :bye:

@ ПОДПИСАТЬСЯ НА НОВОСТИ САЙТА

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

Поделиться:

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

  1. Иван:

    Посмотрел пример, который реализован по ссылке http://wwdiz.ru/adobe-museuroki-sozdaniya-sajta-v-vizualnom-redaktore.html Это как раз то, что я искал. Но когда попробовал сделать, исходя из вашего скрипта, у меня получилось не совсем то, как в примере. А именно, у меня просто открывается новое окно  в классической рамке. А на примере это выглядит как модальное окно с затемнением фона и без рамки. Может я что-то не так делаю? Заранее благодарен!

    1. Иван, благодарю за активность. Это мой косячок. Я уже давно поменял вывод видео на той странице на скрипт fancybox, поприличнее выглядит. А вот из статьи позабыл убрать ссылочку. Приношу свои глубочайшие и исреннейшие извинения.  :wacko:

      1. Иван:

        Спасибо за ответ! Перечитал много информации по fancybox как на английском, так и на русском, везде инструкции с общими примерами (все в совокупности и фото и видео и др, скрипты разбросаны по разным папкам и очень много лишнего + разные версии по разному) и как-то плохо понятно. У Вас случайно нет информации как внедрить fancybox именно для видео (youtube, vimeo), как можно более кратко, просто и понятно. Спасибо!

        1. Иван, давно хотел это сделать, да всё руки не доходили. Ваша просьба послужила хорошим толчком в нужном направлении.

          Статья по FancyBox готова, размещена по адресу:

          http://wwdiz.ru/skript-fancybox.html

          Удачи!  :bye:

  2. Благодарю за доходчивый ответ!

    Недавно нашел точно такой же скрипт, только с автоматическим выводом скриншота.

    Даю начало, ссылка на скрипт :   <a href=»javascript:doPopup(‘http://www.youtube.com/embed/Nl87d8ADfFU’)»> <img src=»http://i1.ytimg.com/vi/Nl87d8ADfFU/default.jpg» rel=»nofollow»><strong>Snap Ooops Up </strong></a>

    А основной скрипт точно такой-же как и ваш.

    Проверил. Класс…

    Не надо закачивать и устанавливать миниатюру-ссылку.

    Но все-же буду искать что-то получше.

    И вам, удачи!

  3. Не знаю как выразить вам свою благодарность!

    Давно ищу подобное решение.

    А тут…

    Микро скриптик, который, возможно, позволит избавиться от видео плагина. :good:

    Хотелось бы узнать. Можно ли изменить вид всплывающего окна?  А если можно, как это корректно сделать.

    Вот ссылка на тест-страничку, где я реализовал подсказанный вами способ вывода видео: http://skritikoi.net/retro-muzyka/video-vo-vsplyvayushhem-okne.html

    В качестве благодарности оставьте ссылку на моем сайте в комментариях. Она всегда будет открыта для поисковиков! ( Только не на размещенной выше тест-страничке. Она закрыта для индексации).

    С уважением!

    Александр!

    1. Александр, благодарю за добрые слова и предложение по размещению ссылки. Я все эти уловки со ссылками не слишком уважаю, будут естественные — хорошо, нет и хрен с ними.  😉

      По скрипту, мне не удалось найти решение по изменению внешнего вида всплывающего окна. В этом и есть жирный минус этого скрипта. Пришлось от него отказываться, слишком уж нафталином попахивает. Единственное, что можно поменять — это шкуру проигрывателя через переменные самого youtube. Надо, всё-таки искать более современные решения.  :bye:

      Удачи!

  4. Вопрос:

    сколько ни пробую, но &modestbranding=1  не работает. он работал со старым кодом <object> а с новым ну никак.

    Вставляю <iframe width=»320″ height=»180″ src=»//www.youtube.com/embed/pXCdD5Eljdk?rel=0&modestbranding=1» frameborder=»0″ allowfullscreen></iframe>

    и пробую ставить как вы советуете в статье

    <p><a href=»javascript:doPopup(‘//www.youtube.com/embed/pXCdD5Eljdk?rel=0&modestbranding=1’)» …….

    Но логотип ЮТ как был так и есть. Не подскажете, что это и почему так?

    1. Да, я тоже заметил, что этот параметр перестал работать. Причём, во всех статьях, где описывается эта настройка, картина аналогичная — логотип ЮТ убрать не получается. Это, скорее всего, сами разработчики с ЮТ нахимичили, им же надо себя пиарить. Как найдётся способ, озвучу. Если вы найдёте — делитесь.

      Удачи!  :bye:

  5. Александр:

    Спасибо.

  6. Александр:

    У Вас для открытия окна с видео нужно кликнуть по текстовой ссылке (Где и как скачать и установить программу), а мне хотелось бы что бы вместо этой фразы стояла картинка, заставка видео. Как например вот на этом сайте: http://remoskop.ru/doska-opalubki-fundamenta-tolshhina.html

    1. Александр, теперь стало понятно. :yahoo:

      Реализуется проще простого. Вместо текста
      Где и как скачать и установить программу Adobe Muse
      вставляете код нужной картинки:
      img src=»адрес картинки»
      Не забудьте прописать скобки <> При желании, прописываете тайтл, альт, ширину и высоту.

      Удачи! :bye:

      1. Александр:

        Здравствуйте, как сделать ссылку на ЮТ невидимой для поисковиков?

        1. Александр, сделать полностью невидимой ссылку для поисковиков можно только одним способом — не размещать эту ссылку. Все остальные способы, которые легко найти по запросу: «Как закрыть ссылку от индексирования», могут только рекомендовать поисковым роботам не индексировать эту ссылку, и то, совсем не факт, что они это делать не будут.  :unsure:

          Удачи!  :bye:

  7. Александр:

    Здравствуйте, а как сделать ссылку с картинки?

    1. Александр, не совсем понял, что вы хотите узнать. С какой картинки, уточните ваш вопрос, пожалуйста. :unsure:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

:bye: 
:good: 
:za-nas: 
:wacko: 
:yahoo: 
:skromnost: 
:heart: 
:rose: 
:-) 
:yes: 
:cry: 
:mail: 
:unsure: 
;-)