Как найти ссылку на Ютуб в коде страницы

Привет, я пытаюсь получить список видео с API YouTube, а затем открыть его в iframe, который находится на моем сайте. Приведенный ниже скрипт будет извлекать список видео по ключевому слову, но он будет ссылаться только на страницу, на которой размещено видео, и я, очевидно, хотел бы открыть его в iframe на своей странице. Или, по крайней мере, откройте YouTube для вставки в модал. $watch переменная получить URL-адрес, но он возвращается как https://www.youtube.com/watch?v=videoID echo $videoId; echo $ytstring; ?>

Другие решения

Прежде всего, я бы порекомендовал перейти с JSON вместо XML-фида. Чтобы выполнить загрузку видео в Iframe, вам нужно использовать Javascript.

Вот краткое демо, которое вы можете использовать для справки:

$title
$description$published»; > > ?> function yt_load_video(url)

Как сделать QR код на любую ссылку

Источник: web-answers.ru

HTML YouTube

Самый простой способ воспроизведения видео в формате HTML — это использовать YouTube.

Боретесь с видеоформатами?

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

Преобразование видео в различные форматы может быть сложным и трудоемким.

Более простое решение позволить YouTube воспроизводить видео на вашей веб странице.

YouTube Видео идентификатор

YouTube будет отображать идентификатор (например, tgbNymZ7vqY), когда вы сохраняете (или воспроизводите) видео.

Вы можете использовать этот идентификатор и ссылаться на свое видео в HTML коде.

Воспроизведение видео YouTube в формате HTML

Чтобы воспроизвести видео на веб странице, выполните следующие действия:

• Загрузите видео на YouTube
• Обратите внимание на идентификатор видео
• Определите элемент на вашей веб странице
• Пусть атрибут src указывает на URL адрес видео
• Используйте атрибуты width и height для указания размера проигрывателя
• Добавьте любые другие параметры к URL адресу (см. ниже)

Пример

YouTube Автозапуск

Вы можете сделать так, чтобы ваше видео начинало воспроизводиться автоматически, когда пользователь посещает эту страницу, добавив простой параметр к вашему URL адресу YouTube.

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

Значение 0 (по умолчанию): Видео не будет воспроизводиться автоматически при загрузке проигрывателя.

Значение 1: Видео будет воспроизводиться автоматически при загрузке проигрывателя.

YouTube — Автозапуск

YouTube Плей-лист

Разделенный запятыми список видео для воспроизведения (в дополнение к исходному URL адресу).

YouTube Цикл

Значение 0 (по умолчанию): Видео будет воспроизводиться только один раз.

Значение 1: Видео будет зацикливаться (навсегда).

YouTube — Цикл

YouTube Управления

Значение 0: элементы управления плеером не отображаются.

Значение 1 (по умолчанию): Дисплей управления плеером.

YouTube — Управления

Как вставить код видео с YouTube на сайт, чтобы было удобно для пользователя

Добавляю нижеприведенный код в стили темы (файл css). Он позволяет не задавать размер вставляемого видео, автоматически подстраиваясь под область контента. Отлично работает на десктопе и мобилках.

Код и стили для вставки видео Ютуб на сайт

.thumb-wrap <
position: relative;
padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
padding-top: 30px;
height: 0;
overflow: hidden;
>
.thumb-wrap iframe <
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

Так как у меня тема Reboot от WpShop, то мне не надо лезть в сам файл стиля. Все делается из админки. Перехожу во Внешний вид ⇒ Настроить ⇒ Дополнительные стили и вставляю нужный мне код

Если у вас в теме нет такой функции, то придется редактировать сам файл стилей.

Далее переходим из визуального в текстовый редактор. Выбираем место и копируем нижеприведенный код ⇒

Копируем нужный вам идентификатора видео ютуба

и вставляем его, вместо кода в примере.

Скопировать его можно перейдя в Ютуб ⇒ внизу ролика нажать ссылку ПОДЕЛИТЬСЯ ⇒ и далее ВСТРОИТЬ.

Все, теперь любое загруженное с YouTube видео, у вас будут сжиматься и растягиваться и по длине и по высоте, подстраиваясь под размер экрана пользователя. Видео станет адаптивным.

Этот способ позволяет избавиться от таких параметров, как width=”560″ height=”315″, которые на разных шаблонах приходиться менять, чтобы видеоролик отображался корректно, а не был растянут или сильно сжат.

Так же это отлично работает на мобильных гаджетах, на которых все корректно уменьшается и расширяется.

Это большой плюс для улучшения поведенческих факторов сайта. Если пользователю будет удобно смотреть на вашем сайте, то ему не зачем уходить на ютуб и запускать это же видео там.

Как это работает, вы можете посмотреть практически в любой статье этого сайта.

Вставка видео с заданным временем начала просмотра

Данную возможность я использовал пока только в одной своей статье про форм-факторы материнских плат.

Тут уже используется такой код, в котором есть параметры ⇒

• start — отвечает за время начала проигрывания видео;
• end — за окончание проигрывания.

Время в этих параметрах указывается в секундах. Например, вы просмотрели видео и нужный фрагмент начинается со 2 минуты 20 секунды (60+60+20=140 сек). Значит в параметр start ставим цифру 140. Окончание нужного видеофрагмента в 3 минуты 10 секунд (60+60+60+10=190 сек). Ставим в end 190 сек.

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

Значения атрибутов в теге iframe

С помощью тега создается плавающий фрейм, который является своего рода контейнером, позволяющим загружать содержимое другой веб-страницы.

• width – цифровое значение, которое задает длину окна фрейма;
• height – цифровое значение, которое устанавливает высоту окна плавающего фрейма;
• src – полный путь к файлу, содержимое которого будет воспроизводиться;
• frameborder – устанавливает или убирает отображение рамки вокруг фрейма. Поддерживаются значения — yes или no, 1 или 0 (нет);
• allowfullscreen – разрешение на полноэкранное отображение видео.

Автор статьи и сайта

В 1998 году — первое знакомство с компьютером. С 2002 года постоянно развиваюсь и изучаю компьютерные технологии и интернет. Сейчас военный пенсионер. Занимаюсь детьми, спортом и этим проектом.

Источник: fixx.one