php вставить видео с ютуба
Как разместить видео на сайте
Дата публикации: 2016-05-13
От автора: приветствую всех читателей webformyself. В прошлой статье мы рассматривали установку счетчика, а сегодня я вам покажу, как разместить видео на сайте двумя способами и какие у каждого особенности.
Вставка видео на сайт
Мы с вами живем в период, когда на веб-странице помимо текста и изображений могут присутствовать и другие элементы. В частности, видео. Хорошо сделанный ролик по теме увеличит ранг страницы и позволит пользователям дольше оставаться на вашем сайте. В общем, это достаточно полезный ход.
Как я уже и говорил в начале, существует два способа вставки, которые сегодня можно использовать:
С помощью тега video, который появился в html5
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
С помощью скриптов
Как разместить видео с Youtube на сайте?
Это очень просто. Идете на ютуб и находите там тот ролик, которое вам нужно вставить к себе на страницу. Под ним есть пару кнопок. В частности, кнопка “Поделиться”. Здесь выбираем пункт html-код и ютуб покажет нам код, который надо вставить у себя в статье, чтобы видео вывелось в ней. Код имеет такое строение:
Давайте вы нем немного разберемся, чтобы понимать, как он работает. Атрибуты width и height указывают ширину и высоту нашего контейнера, вы можете выставить их по дизайну вашего сайта. Пустой атрибут allowfullscreen разрешает расширять содержимое на весь экран, пользователи часто это делают и не нужно им запрещать это.
Frameborder – это рамка фрейма, но она нам ни к чему. Вы можете задать ее самостоятельно через css. Наконец, самый важный параметр – src. Он указывает путь к видео на youtube. //www.youtube.com/embed/уникальный id видео.
Таким образом, вам достаточно знать адрес конкретного ролика и можно его самостоятельно скопировать и вписать в код.
В данном случае id видео это то, что идет после watch?v=.
Итак, с этим способом все понятно, никаких проблем у вас возникнуть не должно. Но если вы ставите не свое видео, то со временем оно может быть удалено или перемещено и на вашем сайте будет указано, что оно недоступно. Именно по этой причине лучше ставить свои видеоролики.
Вставка через html код
Наверняка многие из вас знают, что появилась новая версия языка разметки — html5, и она принесла с собой пару новых тегов и возможностей. Кстати, подробно об этом вы можете посмотреть в нашем курсе по этой технологии.
Так вот, там появился также тег video и он позволяет вставить видеоролик на сайт без каких-либо скриптов, а также воспроизвести его через встроенный плеер. Это делается вот таким кодом:
Как встраивать видео YouTube в PHP?
Может ли кто-нибудь дать мне представление о том, как мы можем показывать или вставлять видео на YouTube, если у нас есть только URL-адрес или код Embed?
Вы должны попросить пользователей сохранить 11-символьный код из видео с YouTube.
Одиннадцатисимвольный код: Ahg6qcgoay4
Затем вы берете этот код и помещаете его в свою базу данных. Затем, где бы вы не захотели разместить видео на YouTube, загрузите символ из базы данных и введите следующий код:
например, для Ahg6qcgoay4 это будет:
Не храните код для встраивания в своей базе данных. Время от времени YouTube может изменять код вставки и URL-параметры. Например, код »’ % (vid,vid) >>>
Регулярное выражение v\=([\-\w]+) захватывает (под) строку символов и тире, которая появляется после v=
Вот код, который я написал, чтобы автоматически превращать URL в ссылки и автоматически вставлять любые видеоролики с YouTube. Я сделал это для чата, над которым я работаю, и он работает очень хорошо. Я уверен, что он будет работать отлично для любой другой цели, а также, например, для блога.
Все, что вам нужно сделать, это вызвать функцию «autolink ()» и передать ей строку, подлежащую анализу.
Например, включите функцию ниже, а затем повторите этот код.
Если вы хотите программно загрузить видео, проверьте API данных YouTube для PHP
В поисках этой же темы я нашел другой метод, используя Javascript API Youtube API
И выполнив следующий код javascript:
Полный образец находится на предыдущей странице http://code.google.com/apis/ajax/playground.
Вы можете сделать это с помощью Joomla. Позвольте мне взять пример URL-адреса YouTube – https://www.youtube.com/watch?v=ndmXkyohT1M
Если я четко понимаю, пользователь предоставляет URL / код видео Youtube, а затем это видео отображается на странице.
Для этого просто напишите простую страницу с макетом и т. Д. Скопируйте видео-код встраивания с youtube и вставьте его на свою страницу. Замените код встраивания на какое-то поле, скажем, VideoID. Установите этот код VideoId в код, предоставленный вашим пользователем.
edit: см. ответ от Alec Smart.
Просто небольшое обновление для ответа Алека Смарта: поскольку AS2 сейчас не рекомендуется, для его работы нужно использовать «? Version = 3». См. Ссылку Youtube на вкладках YouTube Player и Player в разделе «Выбор содержимого для воспроизведения».
По-видимому, ссылка Youtube выше делает это следующим образом (внутренняя вставка предположительно используется как резерв для браузеров, которые еще не поддерживают тег объекта):
Или используя iframes (замените http://example.com на домен вашего сайта):
Этот встроенный генератор YouTube решает все мои проблемы с встраиванием видео.
Вставляем видео с YouTube на сайт
Здравствуйте, уважаемый посетитель!
Сегодня мы затронем еще один вопрос оформления контента и посмотрим, как можно вставить видео с YouTube на сайт.
Надо сказать, что хостинг YouTube с огромным количеством размещенных на нем видеоматериалов сейчас очень популярен. И использование его возможностей, несомненно, сможет в определенной степени повысить интерес пользователей к содержанию сайта.
При этом не надо забывать и о соблюдении требований авторских прав. Поэтому в данном случае мы рассмотрим вариант размещения видео с использованием функциональных возможностей, предлагаемых самим сервисом YouTube, а именно: с помощью стандартного видеоплеера YouTube. Что в соответствии с Условиями использования YouTube позволяет легально использовать этот сервис на своем сайте.
Однако, следует учесть, что предоставляемый сервисом YouTube HTML-код видеороликов предусматривает применение контейнера с фиксированными значениями ширины и высоты. Что несколько затрудняет использования такого видеоплеера при встраивании его на сайты с резиновой версткой.
Поэтому здесь будет показан не совсем ординарный, но достаточно простой способ использования стилей CSS. С помощью которого несложно будет решить эту проблему и отображать видео с YouTube с учетом резиновой верстки на всем диапазоне, который для нашего сайта составляет 320px÷1920px.
Получаем с YouTube нужный видеоролик
Как и ранее при создании сайта мы всегда стараемся использовать только легальные методы. И в данном случае мы не станем «по черному» скачивать видео и показывать его на своем сайте с помощью каких-либо сторонних видеоплееров. Так как такие действия, в случае отсутствия предварительного письменного разрешения YouTube, нарушают подпункт A пункта 5.1 Условия использования YouTube.
Причем в этом случае не нарушаются авторские права обладателей видео, так как для такого показа будут доступны только те продукты, владельцы которых не против встраивания их на другие сайты. А это относится к подавляющему большинству имеющихся на хостинге видеороликов.
Для этого с начала откроем главную страницу YouTube и после поиска по нужной тематике найдем возможные варианты видео, как показано ниже на скриншоте.
Рис.1 Подбор в YouTube видео нужной тематики
После того, как мы просмотрим и выберем для вставки в оформляемую статью наиболее подходящий видеоролик, через кнопку «Поделиться» в открытой вкладке выберем опцию «Встроить».
Рис.2 Выбор во вкладке Поделиться опции Встроить
Ну а теперь осталось лишь только обычным способом скопировать HTML-код выбранного видеоролика.
Рис.3 Копирование HTML-кода видеоролика
Таким образом мы получили HTML-код видео, который нужно вставить в оформляемую страницу.
width = «560» height = «315» src = «https://www.youtube.com/embed/ZRrxsFRszjg» frameborder = «0» allow = «autoplay; encrypted-media» allowfullscreen >
Рис.4 HTML-код видео с YouTube
В дополнение можно отметить, что получить HTML-код можно и другим способом. Для этого достаточно кликнуть правой кнопкой мыши по видео и в открывшемся окне выбрать опцию «Копировать HTML-код», как показано на следующем скриншоте.
Рис.5 Копирование HTML-кода другим способом
Правда, в этом случае в теге ширина и высота будут иметь другие значения. Но нам это не важно, так как далее при встраивании видеоплеера с помощью стилей CSS мы будем использовать не фиксированный его размер, а пропорциональный к ширине области контента.
Вставляем HTML-код видео в оформляемую страницу
Для того, чтобы иметь возможность отображать встраиваемое видео однотипно с используемыми в контенте изображениями, применим типовое решение по размещению графических элементов. При котором видеоплеер будет располагаться по центру с размером в 60% от ширины области контента (в предыдущей статье для этого типа мы определили класс «img-center60» ).
width = «560» height = «315» src = «https://www.youtube.com/embed/ZRrxsFRszjg» frameborder = «0» allow = «autoplay; encrypted-media» allowfullscreen >
Рис.6 HTML-код видео с YouTube
Если теперь открыть страницу с добавленным HTML-кодом, то можно увидеть, что видеоплеер поместился, как и предполагалось, в центре области контента. Однако, его размер не соответствует тому, каким он должен быть при нормальном отображении графических элементов.
Это обусловлено тем, что, как ранее отмечалось, в теге заданы фиксированные значения ширины и высоты. Что, естественно, не позволяет видеоплееру подстраиваться под нужный размер в зависимости от разрешения экрана.
К чему это приводит, можно увидеть на следующих скриншотах, где показаны варианты отображения видеоплеера при разных разрешениях экранов.
Рис.7 Вид видеоплеера с фиксированной шириной при разрешении 1920px.
Рис.8 Вид видеоплеера с фиксированной шириной при разрешении 1280px.
Как видно, такое отображение видеоплеера не может нас устроить. Поэтому для того, чтобы это исправить, сделаем некоторые преобразования.
Встраиваем видеоплеер YouTube с помощью стилей CSS
Для того, чтобы совместить встраиваемый видеоплеер с резиновой версткой сайта используем возможности, которые предоставляют свойства CSS. Так для блока-обвертки выполним следующие действия:
А для полученного с YouTube контейнера с классом «video-pleer» определим:
Это необходимо для того, что бы размер видеоплеера в дальнейшем определялся не фиксированными значениями ширины и высоты, а соответствовал размеру родительского блока. Который в свою очередь, помещенный в типовой контейнер с классом «img-center60» при использовании резиновой верстки подстраивался по ширине в зависимости от разрешения экрана.
В итоге все эти действия можно описать следующей таблицей стилей CSS:
Как получить HTML-код для вставки на сайт видео с YouTube
Видео с YouTube вовсе не обязательно просматривать только на сайте www.YouTube.com. Наверняка приходилось встречать ролики, расположенные на видео-хостинге YouTube, которые вставлены в посты в социальных сетях или на чьи-нибудь сайтах. В этой статье подробно рассмотрим, где и как взять HTML-код для того, чтобы вставить себе на сайт своё (или понравившееся) видео с YouTube.
Как узнать адрес YouTube видео, расположенного на сайте
Посмотрим на примере обычного видео, расположенного на сайте, как узнать его HTML-код для вставки на свой сайт. Для этого внимательно приглядимся к всплывающей информации на видео при наведении мышки. В правом верхнем углу видео находится хитровывернутая стрелка. Она то нам и нужна! Кликаем по ней!
Ссылки «Поделиться» ролика с YouTube
HTML-код для вставки на сайт видео с YouTube
Ура-ура! В новой вкладке откроется собственно страница с видео на сайте YouTube. А это нам и нужно. Смотрим на то, что расположено ниже видео и делаем следующее:
В общем-то всё!
Во вкладке «HTML-код», найденной выше будет то, что мы искали:
Этот код можно скопировать и попытаться вставить к себе на сайт. С этим могут быть проблемы, так как тег может быть запрещён, но это тема для другой статьи.
Также есть расширенные настройки во вкладке YouTube «HTML-код», но это тоже отдельная тема.
Как встроить плеер YouTube на сайт
Инструкция по добавлению плеера с помощью HTML, полезные настройки при вставке через iframe
Добавить плеер YouTube на сайт очень просто, и сегодня вы научитесь это делать. Также расскажем о дополнительных настройках плеера: как задать размеры окна видео, настроить автовоспроизведение и воспроизведение с определенного места и других.
Но начнем с того, как не надо действовать.
Как не нужно вставлять ссылку на видео с YouTube
Распространенная ошибка при попытке вставить YouTube-видео на сайт — добавление прямой ссылки на ролик в HTML-редактор.
Ссылка на видео, конечно, добавится, но отображаться на странице она будет так:
То есть это обычная гиперссылка, кликнув по которой, пользователь попадет на страницу YouTube с размещенным видео.
В принципе, никто не запрещает добавлять ссылки на видео именно так. Но пользователи, кликая по ним, покидают ваш сайт, и не факт, что вернутся.
Для улучшения поведенческих факторов, в частности — увеличения времени, проведенного на странице, — лучше, чтобы они смотрели видео прямо у вас на сайте. И здесь поможет лучший способ вставки видео с YouTube — с помощью HTML.
Инструкция по добавлению плеера с помощью HTML-кода
1. Переходим на страницу видео, которое нужно добавить. Пусть это будет:
2. Нажимаем кнопку «Поделиться» под роликом, а потом во всплывающем окне выбираем первый вариант — «Встроить»:
3. Копируем HTML-ссылку, заключенную в тег iframe:
4. Добавляем ссылку в режиме HTML-редактора на свой сайт (если у вас CMS WordPress, необходимо добавлять ссылку в режиме «Текст»):
5. Просмотреть, как ролик будет выглядеть на странице можно в режиме «Визуально» (речь опять о WordPress):
6. Если вас все устраивает — сохраняем и любуемся результатом на странице:
Вот и все — видео добавлено.
Полезные настройки при вставке ролика через iframe
Центрирование
Бывает, что при таком способе ролик некрасиво встраивается в контент страницы: не устраивает размер окна или оно размещается несимметрично.
Можно отцентрировать видео, заключив ссылку в тег:
В режиме кода это выглядит так:
Результат уже лучше:
Изменение размера плеера
Изменить размер плеера можно, поменяв значения параметров width и height в ссылке. Зададим width=810 и height=400:
В результате видео точно соответствует области контента и смотрится эстетично:
Время начала воспроизведения и другие настройки
При вставке видео с YouTube доступны полезные настройки:
После добавления и снятия галочек код для вставки изменяется автоматически.
Вот что можно настроить:
Добавили видео на сайт? А оптимизировать не забыли? Вот бесплатный интерактивный чек-лист, который поможет найти недочеты в оптимизации и подскажет, что делать.
Настройки «для профи»
Это были базовые настройки, доступные в окне вставки видео. Но есть еще «продвинутые» опции, доступные на странице Google для разработчиков «Демонстрация YouTube Player API».
Для того чтобы настроить видео, необходимо добавить код идентификатора — это буквы после знака = и перед знаком &, который отделяет название канала, в ссылке на видео в YouTube:
Копируем код, вставляем в соответствующее поле и нажимаем кнопку «Обновить проигрыватель с выбранными настройками»:
Теперь нажимаем кнопку «Показать параметры проигрывателя» и видим развернутый список опций, которые можно настроить:
Что можно дополнительно настроить при вставке видео с YouTube
Есть и другие опции. Полный перечень и подробное описание функций представлены в справке Google.
После настройки нужных опций надо обязательно нажать кнопку «Обновить проигрыватель с выбранными настройками». После этого можно копировать ссылку и добавлять ее на сайт.
Если у вас на сайте много видеороликов, то упростить работу с ними можно при помощи специальных плагинов для CMS:
Если же роликов немного, то лучше вставлять их напрямую с YouTube, чтобы не замедлять работу сайта из-за дополнительных плагинов.
Заключение
Вставить видео с YouTube просто — по сути, достаточно скопировать код и разместить на сайте. Но если вы хотите, чтобы плеер гармонично вписывался в дизайн и логику ресурса, необходимо внести изменения в код с помощью встроенных опций или YouTube Player API. Так вы сможете задать время начала воспроизведения, отключить элементы управления, зациклить видео и многое другое.