Вставить HTML5 видео YouTube без iframe?

Возможно ли внедрить версию html5 видео с YouTube без использования iframe?

ОТВЕТЫ

Ответ 1

Вот пример внедрения без iFrame:

<div style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;">
  <embed src="http://www.youtube.com/v/GlIzuTQGgzs?version=3&amp;hl=en_US&amp;rel=0&amp;autohide=1&amp;autoplay=1" wmode="transparent" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true" title="Adobe Flash Player">
</div>

Ответ 2

Да. API Youtube - лучший ресурс для этого.

Есть 3 способа встраивания видео:

  • IFrame внедряет теги <iframe>
  • IFrame встраивается с использованием API-интерфейса IFrame Player
  • Объект AS3 (и AS2 *) содержит DEPRECATED

Я думаю, что вы ищете вторую из них:

IFrame внедряется с использованием API-интерфейса IFrame

В приведенном ниже коде HTML и JavaScript показан простой пример, который вставляет игрока YouTube в элемент страницы с идентификационным значением ytplayer. Указанная здесь функция onYouTubePlayerAPIReady() вызывается автоматически при загрузке кода API IFrame Player. Этот код не определяет параметры игрока, а также не определяет другие обработчики событий.

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

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

Пример внедрения без использования iframe заключается в использовании тега <object>:

<object width="640" height="360">
    <param name="movie" value="http://www.youtube.com/embed/yt-video-id?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3"/
    <param name="allowFullScreen" value="true"/>
    <param name="allowscriptaccess" value="always"/>
    <embed width="640" height="360" src="http://www.youtube.com/embed/yt-video-id?html5=1&amp;rel=0&amp;hl=en_US&amp;version=3" class="youtube-player" type="text/html" allowscriptaccess="always" allowfullscreen="true"/>
</object>

(замените yt-video-id на ваш идентификатор видео)

JSFIDDLE

Ответ 3

Да, но это зависит от того, что вы подразумеваете под "embed"; насколько я могу судить, прочитав документы, кажется, что у вас есть несколько вариантов, если вы хотите обойтись с использованием iframe API. Вы можете использовать javascript и flash API (https://developers.google.com/youtube/player_parameters) для встраивания проигрывателя, но это связано с созданием объектов Flash в вашем коде (что-то я лично избегайте, но не обязательно того, что вам нужно). Ниже приведены некоторые полезные разделы из dev docs для Youtube API.

Если вы действительно хотите обойти все эти методы и включить видео без какого-либо iframe, то лучшим выбором может быть создание видеопроигрывателя/приложения HTML5, которое может подключаться к API данных Youtube (https://developers.google.com/youtube/v3/). Я не уверен, в какой мере ваши потребности, но это будет путь, если вы действительно хотите обойтись с помощью любых фреймов или флеш-объектов.

Надеюсь, это поможет!

Полезное:

(https://developers.google.com/youtube/player_parameters)

IFrame внедряется с использованием API-интерфейса IFrame Player

Следуйте инструкциям API IFrame Player, чтобы вставить видеопроигрыватель на свою веб-страницу или приложение после загрузки JavaScript-кода Player API. Второй параметр в конструкторе для видеоплеера - это объект, который указывает параметры игрока. Внутри этого объекта свойство playerVars идентифицирует параметры игрока.

В приведенном ниже коде HTML и JavaScript показан простой пример, который вставляет игрока YouTube в элемент страницы с идентификационным значением ytplayer. Указанная здесь функция onYouTubePlayerAPIReady() вызывается автоматически при загрузке кода API IFrame Player. Этот код не определяет параметры игрока, а также не определяет другие обработчики событий.

...

IFrame внедряет теги

Определите тег в своем приложении, в котором URL-адрес src указывает содержимое, которое будет загружено игроком, а также любые другие параметры игрока, которые вы хотите установить. Параметры высоты и ширины метки определяют размеры проигрывателя.

Если вы создаете элемент самостоятельно (вместо использования API-интерфейса IFrame Player для его создания), вы можете добавлять параметры игрока непосредственно в конец URL-адреса. URL-адрес имеет следующий формат:

...

Объект AS3 внедряется

Объект включает тэг, чтобы указать размеры и параметры проигрывателя. Пример кода ниже демонстрирует, как использовать объект embed для загрузки AS3-плеера, который автоматически воспроизводит то же видео, что и предыдущие два примера.

Ответ 4

Используйте тег объекта:

<object data="http://iamawesome.com" type="text/html" width="200" height="200">
  <a href="#" onclick="location.href='http://iamawesome.com'; return false;">access the page directly</a>
</object>

Ссылка: http://debug.ga/embedding-external-pages-without-iframes/