web-dev-qa-db-ja.com

iframeなしでHTML5 YouTubeビデオを埋め込みますか？

Iframeを使用せずにyoutubeビデオのhtml5バージョンを埋め込むことは可能ですか？

javascriptjqueryhtml5youtube
36
user2217162

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>

youTubeの通常のiframe「埋め込み」コードと比較してください。

<iframe width="854" height="510" src="//www.youtube.com/embed/GlIzuTQGgzs" frameborder="0" allowfullscreen></iframe>

hTML5に関する限り、<object>タグを次のように使用します（修正済み）：

<object style="width:100%;height:100%;width: 820px; height: 461.25px; float: none; clear: both; margin: 2px auto;" data="http://www.youtube.com/embed/GlIzuTQGgzs">
</object>
19
anapsix

はい。 Youtube API はこれに最適なリソースです。

ビデオを埋め込むには3つの方法があります。

  • <iframe>タグを使用したIFrame埋め込み
  • IFrame Player APIを使用したIFrame埋め込み
  • AS3（およびAS2 *）オブジェクトの埋め込みDEPRECATED

あなたはそれらの2番目のものを探していると思います：

IFrame Player APIを使用したIFrame埋め込み

次のHTMLおよびJavaScriptコードは、ytplayerのid値を持つページ要素にYouTubeプレーヤーを挿入する簡単な例を示しています。ここで指定されたonYouTubePlayerAPIReady（）関数は、IFrame Player APIコードがロードされると自動的に呼び出されます。このコードは、プレーヤーパラメータを定義せず、他のイベントハンドラも定義しません。

<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をビデオIDに置き換えてください）

[〜＃〜] jsfiddle [〜＃〜]

10
Ionică Bizău

はい。ただし、「埋め込み」の意味によって異なります。ドキュメントを読んだ後にわかる限り、iframe APIを使用して回避したい場合、いくつかのオプションがあるようです。 JavaScriptとFlash APIの（ https://developers.google.com/youtube/player_parameters ）を使用してプレーヤーを埋め込むことができますが、これにはコード内にFlashオブジェクトを作成する必要があります（個人的には、しかし、必ずしもあなたがしなければならないものではありません）。以下は、Youtube APIの開発ドキュメントからの役立つセクションです。

これらのすべてのメソッドを実際に回避し、iframeを一切使用せずにビデオを含めたい場合は、Youtube Data APIに接続できるHTML5ビデオプレーヤー/アプリを作成することをお勧めします（ https：// developers .google.com/youtube/v3 / ）。私はあなたのニーズの範囲がわからないが、これはあなたが本当に任意のiframeまたはフラッシュオブジェクトを使用して回避したい場合に行く方法だろう。

お役に立てれば！

有用：

（ https://developers.google.com/youtube/player_parameters ）

IFrame Player APIを使用したIFrameの埋め込み

Player APIのJavaScriptコードが読み込まれた後、IFrame Player APIの指示に従って、Webページまたはアプリケーションにビデオプレーヤーを挿入します。ビデオプレーヤーのコンストラクターの2番目のパラメーターは、プレーヤーオプションを指定するオブジェクトです。そのオブジェクト内で、playerVarsプロパティはプレーヤーパラメータを識別します。

次のHTMLおよびJavaScriptコードは、ytplayerのid値を持つページ要素にYouTubeプレーヤーを挿入する簡単な例を示しています。ここで指定されたonYouTubePlayerAPIReady（）関数は、IFrame Player APIコードがロードされると自動的に呼び出されます。このコードは、プレーヤーパラメータを定義せず、他のイベントハンドラも定義しません。

...

タグを使用したIFrameの埋め込み

アプリケーションでタグを定義します。srcURLには、プレーヤーが読み込むコンテンツと、設定する他のプレーヤーパラメータを指定します。タグの高さと幅のパラメーターは、プレーヤーの寸法を指定します。

IFrame Player APIを使用して要素を作成するのではなく、自分で要素を作成する場合、プレーヤーパラメータをURLの末尾に直接追加できます。 URLの形式は次のとおりです。

...

AS3オブジェクトの埋め込み

オブジェクトの埋め込みでは、タグを使用してプレーヤーのサイズとパラメーターを指定します。以下のサンプルコードは、埋め込みオブジェクトを使用して、前の2つの例と同じビデオを自動的に再生するAS3プレーヤーをロードする方法を示しています。

1
markthethomas

オブジェクトタグを使用します。

<object data="http://iamawesome.com" type="text/html" width="200" height="200">
  <a href="http://iamawesome.com">access the page directly</a>
</object>

参照： http://debug.ga/embedding-external-pages-without-iframes/

0
jamaco