YouTube動画やニコ動をHTML(BLOGブログ)に貼り付ける方法(埋込みタグ使用)。
また、YouTube動画で、
高画質で貼り付けたり埋め込みプレーヤーの周りに境界線(枠)を付けたり、パネル(フレーム)に色を付ける。

YouTube動画などをHTMLに貼り付けるには、動画再生ページに表示されている埋め込み(Embed)タグを使用します。YouTubeなど動画共有サイトで可能です。
埋め込み(Embed)タグには、サイトにより異なり、
<OBJECT>タグ(embedタグ含む)<IFRAME>タグ、または<EMBED>タグのみが使用されます。
また、動画サイトにより、埋め込み(Embed)タグ(貼付けコードと呼ぶサイトもあり)の表示場所や表示方法が異なりますので注意してください。

動画URLを入力してYouTube埋め込みコードを自動作成-自動再生|自動繰り返しループ|色ボタン|サイズ縮小|ボタンのみ|高さ自動計算 など
JavaScriptで、HTMLに貼り付けた(埋め込み)YouTube動画をコントロールする方法(API/SWFObject) (Javascript起動。YouTubeのみ。)
YouTubeなどのサムネイル画像をクリックしてそのページ内でYouTube動画を開く[Videobox] Lightbox for Video (Aタグでリンクしてクリック)
YouTube、WMP、SWF、RealPlayerなどのサムネイル画像・文字をクリックして、そのページ内で動画などを開く方法 [Mediabox] Lightbox for Media
 (Aタグでリンクしてクリック。Webページも可。)
サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する[Lightbox]
サムネイル画像をクリックして、そのページに、拡大画像をクールにオーバーレイ表示する[Pirobox]Lightboxより優れもの
<OBJECT>タグの貼り付け方法-YouTube貼り付け、Dailymotion、Lulu TV、Danerd、Blastro、myspace、など
1.YouTubeで、貼り付けたい動画を再生させます(サンプル:http://www.youtube.com/watch?v=RnDZB4r13qo

2.再生した動画の下の「<埋め込みコード>」をクリックし、埋め込みコードをコピーし、HTMLへ貼り付けます。
 
2つの方法があります。
それは、表示される@埋め込みコードをコピーし貼り付ける(方法1)またはAブログアイコンをクリックして自動的に貼り付ける(方法2)方法です。
(注.@は埋め込みコードに対応していないブログがあります。Aは特定のブログに限ります。)
 
(方法1)埋め込みコードをコピーして貼り付ける場合(>埋め込みコードのカスタマイズ例)(@、A、B、C
One Piece Opening 12 [NEW OPENING] Tap-Co Run
@「共有」をクリックします
A「埋め込みコード」をクリックします
B
  • 「関連する動画を含める」にチェックを入れると、「再生」が終わったとき、関連動画が表示されます。
    「関連する動画を含める」のパラメータは、relです。rel=1または省略時:含める rel=0:含めない。
    ▼rel=1または省略時の例は下図。にぎやかです。
  • 「古い埋め込みコードを使用する [?] 」にチェックを入れるとembed codeタグがCに生成されます。
      「古い埋め込みコードを使用する[?]」にチェックを入れないとiframeタグがCに生成されます。
C「埋め込みコード」(<object ・・・)をサイズを調整(カスタマイズ)後コピーし、ブログなどに貼り付けます。

(方法2)ブログアイコンをクリックして特定ブログ(Amebaなどに限る)に貼り付ける場合、@、A、Bの順に行います。
  @画面下の「共有」をクリックし、A「この動画を共有」をクリックしブログ名を表示します。
  そして、Bをクリックし、ブログアイコンを表示させる。
ブログ(Amebaなどに限る)に貼り付ける場合
C表示された好みの「ブログアイコン」をクリックします・・・新規記事に自動貼り付け可能です。
  貼り付け後。サイズなどを調整(カスタマイズ)します。
ブログ(Amebaなどに限る)に貼り付ける場合
(方法2)は、サイズの変更などのカスタマイズはYouTubeページでは出来ません。カスタマイズは、埋め込みコードを直接自分で修正します。
動画サイトにより、埋め込み(Embed)タグの表示場所や表示方法が異なりますので注意してください。
Yahooブログは、埋め込み(Embed)タグを貼り付けできません。wiki文法で貼り付けます。
(wiki文法例)[[embed(貼り付ける動画のアドレス,横のサイズ,縦のサイズ)]]詳細は、4.Yahooブログの例を参照。
YouTube再生ページからブログに自動貼り付けしたときの大きさは、425×344(アスベスト比が4:3)、480×295(アスベスト比が16:9)(ピクセル)です。
 
3.HTMLの例(サイズ、自動再生などのカスタマイズ)
 
YouTubeの場合、埋め込みプレーヤーに境界線(枠)を付けたり、フレーム(パネル)に色を付けたり、高画質を表示することができます。
また、再生開始位置の指定を行うことが出来ます。これらは、埋め込みプレーヤーのパラメータを使用してカスタマイズすることにより実現できます。
上でコピーしたソースコード(<object>から</object>)を、HTML(ブログ)に貼り付けます。
YouTubeに限らず、Embedタグを公開している他の動画も、同様です。
動画のサイズは、好みにより変更します。ソースコードには、サイズ(width=とheight=)の定義が2箇所ありますので注意してください。
 
HTMLの内容に応じ、動画のサイズを適宜縮小します。
YouTube動画で使用できる埋め込みコードは 3 種類あります。基本形はつぎのとおり。
【注】2013年6月ごろより埋め込みコードの動画URLのhttp:部分(プロトコル表記)が省略されるようになった。

(1) 以前の埋め込みコード「<object...」で始まり、Flash の再生にのみ対応 ・アスベスト比 16:9の場合
<object width="560" height="315"><param name="movie" value="//www.youtube.com/v/m8EldpeRfXc?version=3&hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/m8EldpeRfXc?version=3&hl=ja_JP" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

・アスベスト比 4:3の場合
<object width="420" height="315"><param name="movie" value="//www.youtube.com/v/HL4IZfsJ6_4?version=3&hl=ja_JP"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/HL4IZfsJ6_4?version=3&hl=ja_JP" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>


(2) 新しい埋め込みコードは「<iframe...」で始まり、Flash と HTML5 動画に対応-使用できないブログもある ・アスベスト比 16:9の場合
<iframe width="560" height="315" src="//www.youtube.com/embed/m8EldpeRfXc" frameborder="0" allowfullscreen></iframe>

・アスベスト比 4:3の場合
<iframe width="420" height="315" src="//www.youtube.com/embed/HL4IZfsJ6_4" frameborder="0" allowfullscreen><//iframe>


(3) ブログがYouTube の oEmbed APIに対応している場合、URLを貼り付けるのみ-使用できるブログは少ない http://www.youtube.com/embed/dBgxFAgijlo


動画のコントロールバーを含まない映像部分の大きさサイズ)は、
アスベスト比が4:3の場合、420×315、480×360(デフォルト)、640×480、960×720(ピクセル)が基本になります。
また、アスベスト比が16:9の場合、560×315、640×360(デフォルト)、853×480、1280×720(ピクセル)が基本になります。
動画のアスベスト比を知る方法は、動画の再生中に画面上で、右クリックして「動画情報を表示する」をクリックすると、動画サイズが表示されます。
たとえば、640×360と表示された場合、横を高さで割ると、640÷360=1.777...となます。
答えが、1.777..の場合アスベスト比が16:9(下の画像の例)、答えが、1.333..の場合アスベスト比が4:3です。
  動画情報表示 アスベスト比が16:9の動画
:YouTubeは、埋め込みプレーヤーのサイズを動画の映像部分の大きさと同じにしています(下画像)。以前は高さにコントロールバーの高さを加えていた。)
  YouTUbe再生画面の共有→埋め込みコードのサイズカスタマイズの部分



←アスベスト比が16:9の
埋め込みプレーヤーのサイズの例
(コントロールバーの高さが加算されていない)
・左のマス(幅 width)に好みの数字を入力すると、右のマス(高さ height)は自動計算されます。(width=500の例)
埋め込みプレーヤーのサイズ
・プルダウンメニューの「カスタマイズ」をクリックすると、4つのデフォルトサイズが表示されます。好みのサイズをクリックします0。

※現在、URLのhttp:部分(プロトコル表記)が省略されるようになった。
省略の例."//www.youtube.com/embed/RnDZB4r13qo" (http: 部分省略。以下同様。)
▽フルコード
<iframe width="560" height="315" src="//www.youtube.com/embed/RnDZB4r13qo" frameborder="0" allowfullscreen></iframe> 

  YouTUbe再生画面の共有→埋め込みコードのサイズカスタマイズの部分



←アスベスト比が4:3の
埋め込みプレーヤーのサイズの例
(コントロールバーの高さが加算されていない)
(上図アスベスト比が16:9、下図アスベスト比が4:3の埋め込みプレーヤーのサイズ。「共有」→「埋め込みコード」で表示される部分。)
埋め込みプレーヤーのサイズは、この高さにコントロールバーの高さ25を加えるとよいでしょう(YouTubeは30と言っている)。
(例)埋め込みプレーヤーのサイズは、YouTubeがカスタマイズするサイズ560×315のとき左右に黒の背景が見えちょっと気になります(下左)。
実際に埋め込む場合は、高さにコントロールバーの高さ(25)を加えるときれいに表示されます。サイズは560×315→560×340(縦のみを+25)(下右)。
YouTubeのカスタマイズサイズ560x315そのまま YouTubeのカスタマイズサイズ560x315にコントロールバーの高さ25を加えて補正560x340

(注)画像は横を320pxに縮小表示しています。
この動画はアスベスト比16:9です。
http://www.youtube.com/watch?v=Fb4jRjSGvw0

左、YouTubeがカスタマイズしたサイズ560×315。

右、コントロールバーの高さ25を加えて補正560x340。
なお、YouTube再生ページからブログに自動貼り付けしたときの大きさは、459×344(4:3)、480×270(16:9)です。
ブログなどに実際に貼り付ける場合は、HTMLやブログの配置などで自由に好みの大きさに調整しましょう。
大きさの値が多少間違っても、表示は自動的に調整してくれます。
:動画をきれいに表示させるには、高さで調整します。画面の左右に黒の背景が見える場合は、高さを増やし調整し、
画面の上下に黒の背景が見える場合は、高さを減らして調整します。)
埋め込みサイズのカスタマイズ計算例サイズ変更により、再生ボタンのみ(映像非表示)をブログなどに埋め込みができます
 
HTML貼り付け例(実際は、赤字の部分の<object>から</object>まで1行でコピーされます)標準の埋め込みコード
<!--動画埋め込みタグ↓-->
<object width="560" height="345">
<param name="movie" value="http://www.youtube.com/v/RnDZB4r13qo?version=3&hl=ja_JP">
</param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/RnDZB4r13qo?version=3&hl=ja_JP" 
type="application/x-shockwave-flash" width="560" height="345" 
allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

<!--動画埋め込みタグ↑-->
埋め込みコード:

フレームに色を付けたり、高画質を表示する、自動再生にしたいなどの修正例-青色の部分(サイズは変えない例)
<html>

<body>

<!--動画埋め込みタグ↓-->
<object width="560" height="345">
<param name="movie" 
 value="http://www.youtube.com/v/RnDZB4r13qo?version=2&hl=ja_JP&color1=0xff00ff&color2=0xffff00&border=1&hd=1&autoplay=1">
</param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed 
 src="http://www.youtube.com/v/RnDZB4r13qo?version=2&hl=ja_JP&color1=0xff00ff&color2=0xffff00&border=1&hd=1&autoplay=1" 
type="application/x-shockwave-flash" width="560" height="345" 
allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

<!--動画埋め込みタグ↑-->
</body>
</html>
埋め込みコード:
【説明」埋め込みプレーヤーのパラメータ(パラメータは、半角アッパサンド& または &amp;で区切ります)
 (注)埋め込みコードがiframeタグの場合は、使用できるパラメータは、autoplay(自動再生パラメータ)、fs、showinfo、iv_load_policyのみです。(2012.1.4)
  1. rel:関連動画を読み込むかどうかを指定
    値: 0 または 1。デフォルトは 1 です。最初の動画の再生を開始した後、プレーヤーで関連動画を読み込むかどうかを指定します。
    関連動画は、メニュー ボタンをクリックするとジニー メニューに表示されます。
    プレーヤー検索機能は、rel を 0 に設定すると、無効になります。
  2. start:再生位置の時間指定(startパラメータは、正式の埋め込みパラメータではありません)。
    動画の再生開始位置の指定を行います。例:start=120 (単位は秒)
  3. border:埋め込みプレーヤーのフレーム(パネル)画面に枠を付けたいと場合1を指定します(下の再生例1)。
    付けたく無い場合は0を指定するかborderパラメータを省略します(下の例2)。デフォルトは0です。 例;border=1
    なお、borderの値が0またはborderパラメータを省略しても、つぎのcolor1 , color2を指定するとコントロール バーには色が付きます。
  4. color1 , color2:color1は境界線(枠)のメイン カラー、color2 はコントロール バーの背景色と境界線のサブ カラーです。
    2つの色を16進で指定します。16進rrggbbの前に#でなく、0xを付けます。例;color1=0xff00ff カラーコード
    コントロールバーのみ色を付けたい場合は、borderの値を0にするかborderパラメータを省略します。
    また、カラーを有効にするためには、versionパラメータの値を2にするか、無指定にする必要があります。

    (説明)

    color1
    画面の境界線(枠)のメインカラー(@)および
    コントロール バーの境界線(枠)のカラー(A)
    (例はff00ff:Magenta マジェンタ)

    color2
    画面の境界線(枠)のサブカラー(B)および
    コントロール バーの背景のカラー(C)
    (例はffff00:Yellow 黄色)

  5. autoplay:値は、 0 (自動再生しない)または 1(自動再生する)。デフォルトは 0 です。プレーヤーが読み込まれたときに、
    最初の動画を自動再生するかどうかを指定します。
  6. loop:動画の繰り返し再生の指定(自動再生)。
    値: 0 または 1。デフォルトは 0 です。単一動画プレーヤーの場合、1 を設定すると、最初の動画が繰り返し自動再生されます。
    再生リスト プレーヤーまたはカスタム プレーヤーの場合、再生リスト全体を再生した後、最初の動画から再び再生が始まります。
  7. hd:値は、0 または 1。デフォルトは 0 です。1 に設定すると、デフォルトで HD(高画質)再生が有効になります。
    この設定は、クロムレス プレーヤーには影響しません。
    また、動画の HD 版を使用できない場合もこの設定はプレーヤーに影響しません。
  8. version:値が 3 の場合、AS3埋め込みプレーヤー。パラメータ省略の場合は、AS3埋め込みプレーヤー。
    AS3(ActionScript 3)埋め込みプレーヤーのURLはhttp://www.youtube.com/v/VIDEO_ID?version=3
    AS2埋め込みプレーヤーのURLはhttp://www.youtube.com/v/VIDEO_IDになります。
    AS3埋め込みプレーヤーの場合、大きさは画面の右下が基準になります。
    サイズ変更時(再生ボタンのみ表示など)やカラーパラメータを有効には AS2埋め込みプレーヤー(version=2)を指定してください。
  9. 埋め込みプレーヤーのパラメータの詳細は、Googleサイトを参照してください。
    埋め込みプレーヤーのパラメータには、rel,autoplay,loop,enablejsapi,playerapiid,disablekb,egm,border,color1, color2,start,fs,hd,showsearch,showinfo,iv_load_policy,cc_load_policy があります。
    埋め込みコードがobject/embedタグの場合すべてのパラメータが使用できますが、iframeタグの場合使用できるパラメータは、autoplay,fs,showinfo,iv_load_policy のみです。
 なお、これらの一部のカスタマイズは、YouTubeの再生ページで行うことができます。
その結果は、埋込みタグに反映されます。
>カスタマイズ例
 
▼再生例1 大きさ:480X303 rel=1( 関連する動画を含める)
埋め込みコード:
▼再生例2  ブログのサイドバーなどの動画サイズに
縮小例 大きさ:180X121

上の動画は、再生開始位置の指定を行っています。
  120秒後から再生します。
(start=120)

埋め込みコード:

▼再生例3-1 再生ボタン(start/pause)、ボリュームボタンのみ表示
映像部分非表示-ブログ向き)大きさ:60X25
埋め込みコード:
  
border=0とするかborderを省略します。縦幅は、25が最適。横幅は、好みの幅に。
AS3埋め込みプレーヤーの場合(http://www.youtube.com/v/VIDEO_ID&version=3)、
versionパラメータの値を2にしてください。

埋め込みタグコードは、objectタグであること。
▼再生例3-2 再生ボタン(start/pause)のみ表示
映像部分非表示-ブログ向き)大きさ:30X25
埋め込みコード:

border=0とするかborderを省略します。縦幅は、25が最適。横幅は、好みの幅に。
AS3埋め込みプレーヤーの場合(http://www.youtube.com/v/VIDEO_ID&version=3)、
versionパラメータの値を2にしてください。

埋め込みタグコードは、objectタグであること。
 
▼再生例4(複数動画の連続再生。6つの動画の連続再生例。)(2011.10.13更新)
YouTubeでは、アカウントを取得すると、好きな動画を複数同時に、HTML(ブログ)に埋め込むことができ、連続再生ができます。
このような埋め込みプレーヤーのカスタマイズ方法は、自分のアカウントページで再生リストの埋め込みタグをHTML(ブログ)に貼り付けます。
なお、従来のカスタムプレーヤー(http://www.youtube.com/my_players)は廃止になりました。今後は再生リストの埋め込みタグを用います。


(従来のカスタムプレーヤー)


(再生リストの埋め込みタグを使用した埋め込みプレーヤー(iframeタグ)。6つの動画が埋め込まれています。)

再生中の動画は、キーボードで次のような操作ができます。
  • スペースキー:再生/一時停止
  • 左矢印キー:現在の動画を再生し直す
  • 右矢印キー:現在の動画を 10% 先に進める
  • 上矢印キー:ボリュームを上げる
  • 下矢印キー:ボリュームを下げる
 
YouTubeページで、埋め込みコード(埋め込みプレーヤ)のカスタマイズ例


<object width="580" height="360">
<param name="movie" 
value="http://www.youtube.com/v/RnDZB4r13qo?version=3&hl=ja_JP&fs=1&color1=0xe1600f&color2=0xfebd01&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/RnDZB4r13qo?version=3&hl=ja_JP&fs=1&color1=0xe1600f&color2=0xfebd01&border=1" 
type="application/x-shockwave-flash" 
allowscriptaccess="always" allowfullscreen="true" width="580" height="360">
</embed>
</object>
  • @「共有」ボタンを押します。
  • A「埋め込みコード」ボタンを押します。
  • B「 関連する動画を含める」「古い埋め込みコードを使用する [?] 」を選択します。
    「古い埋め込みコードを使用する [?] 」にチェックを入れるとembed codeタグ(<object ・・・)がDに生成されます。
    「古い埋め込みコードを使用する[?]」にチェックを入れないとiframeタグがDに生成されます。
    &rel=0:0は、関連する動画を含めない。1は、関連する動画を含める(rel=が無い場合は 1)。
    &border=1:0は、「境界線の表示」を入れない。1は、「境界線の表示」を入れる。
  • color1 は境界線のメイン カラー、color2 はコントロール バーの背景色と境界線のサブ カラーです。
    カラーを指定する場合は、version=3をversion=2に変更してください。
  • (width height サイズパラメータ)
    Cの左の方「埋め込みプレーヤ」のサイズを選択します。または、
    Cでサイズを好みの大きさに指定できます。横(width)を入力すると、縦(height)は自動計算されます。
  • D「埋め込みコード」(<object ・・・)をコピーします。
  • 埋め込みプレーヤーのパラメータの詳細は、Googleサイトを参照してください。
    埋め込みプレーヤーのパラメータには、rel,autoplay,loop,enablejsapi,playerapiid,disablekb,egm,border,color1, color2,start,fs,hd,showsearch,showinfo,iv_load_policy,cc_load_policy があります。
 
4.Yahooブログの例(YouTube)
 
YahooブログにYouTubeを貼り付けるには、3つの方法があります。
  1. YouTube再生画面の下の「共有」をクリックし、「その他▼」をクリックしブログ名を表示します。
    そして、「yahoo! japan」の文字をクリックすると新規記事に自動貼り付けできます。(かんたんモード画面)
  2. YouTube再生画面のアドレスバーなどの動画URLをコピーし、Yahooブログの新規投稿画面(かんたんモード画面)でつぎの操作をします。
    • 「動画、ブログパーツのURLを指定して記事にはりつける 」アイコンをクリックします。(@)
    • 「動画、ブログパーツのURLを指定して記事にはりつける 」画面にて、動画URL(A)、動画の配置(B)、埋め込み動画の横幅(C)や高さ(D)
      を入力し、「OK」(E)をクリックします。
    • 動画が埋め込まれると絵柄が表示されます
  3. YouTube再生画面の下の「共有」をクリックし、次に「埋め込みコード」をクリックすると、「埋め込みコード」が表示されます。
    その埋め込みコードを、Yahooブログの動画のwiki文法の書式に変換し、「Wiki、HTMLモード」画面にて、記事に貼り付けます。
    ここではこの2.の方法について述べます。
    ※予め、Yahoo!ブログは「新規投稿」画面を「Wiki、HTMLモード」画面に変えて「Wiki文法使用」にチェックを入れておきます。
 
<!--YouTube埋め込みコード↓-->
<object width="580" height="360">
<param name="movie" value="http://www.youtube.com/v/RnDZB4r13qo&hl=ja&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/RnDZB4r13qo&hl=ja&fs=1" 
type="application/x-shockwave-flash" allowfullscreen="true" width="580" height="360">
</embed>
</object>
<!--動画埋め込みコード↑-->

↓↓↓Yahoo!「Wiki文法に変換

[[item(http://www.youtube.com/v/RnDZB4r13qo&hl=ja&fs=1,580,360)]]
 
動画を表示するための書式(wiki文法) : [[item(埋め込み動画のURL,横のサイズ,縦のサイズ)]]  (2010.2.4修正)


<IFRAME>タグの貼り付け方法-eyeVioやVeohなど
1.eyeVioで再生した動画の左下「貼付けコード」ボタンをクリックすると埋め込みタグが表示されますので、
 そのタグを右クリックでコピーし、HTMLへ貼り付けます(<IFRAME>タグ)
eyeVio 猫
※動画サイトにより、埋め込み(Embed)タグの表示場所や表示方法が異なりますので注意してください。
 
2.HTMLの例
 
上でコピーしたソースコード(<iframe>から</iframe>)を、HTML(ブログ)に貼り付けます。
動画のサイズは、好みにより変更します。ソースコードには、サイズ(width=とheight=)の定義が2箇所ありますので注意してください。
 
HTMLの内容に応じ、適宜縮小します。70%に縮小の場合、例のようにします。   
例;
width=400  521×0.7→365
height=330  330×0.7→231
▼HTML貼り付け例(実際は、赤字の部分の<iframe>から</iframe>まで1行でコピーされます)
<html>

<body>

<!--動画埋め込みタグ↓-->
<iframe src="http://eyevio.jp/embed.do?movieId=98808&width=521&height=330" 
style="margin: 0px; width: 521px; height: 330px;" frameborder="0" scrolling="no"
></iframe>
<!--動画埋め込みタグ↑-->

</body>
</html>
    
(注)このHTML例は、<iframe>タグのため、<object>や<embed>タグのように動画をアクティブ化する必要はありません。
 
▼再生例1
▼再生例2 動画サイズを70%縮小例

サイズ:width="365" height="231"


<EMBED>タグの貼り付け方法-Metacafe、ifilm、Putfile など
1.Metacafeで再生した動画の下の「Embed」に、埋め込みタグが表示されています。
 そのタグをコピーし、HTMLへ貼り付けます(<EMBED>タグ)
myspace Thousand Words - Koda Kumi, support FF
※動画サイトにより、埋め込み(Embed)タグの表示場所や表示方法が異なりますので注意してください。
 
2.HTMLの例
 
上でコピーしたソースコード(<iframe>から</iframe>)を、HTML(ブログ)に貼り付けます。
動画のサイズは、好みにより変更します。ソースコードには、サイズ(widthとheight)の定義は、EMBEDタグの場合1箇所です。
 
HTMLの内容に応じ、適宜縮小します。75%縮小の場合、例のようにします。   
例;
・width=400 400×0.75→300 ・height=345 345×0.75→258
▼HTML貼り付け例(実際は、赤字の部分の<embed>から</embed>まで1行でコピーされます)
<html>

<body>

<!--動画埋め込みタグ↓-->
<embed src="http://www.metacafe.com/fplayer/4146777/woode_wood_baby.swf" 
width="400" height="345" wmode="transparent" 
pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash" allowFullScreen="true" 
allowScriptAccess="always" name="Metacafe_4146777"> 
</embed><br>
<font size = 1><a href="http://www.metacafe.com/watch/4146777/woode_wood_baby/">Woode Wood: Baby</a> 
- <a href="http://www.metacafe.com/">The most amazing bloopers are here</a>
</font>

<!--動画埋め込みタグ↑-->

</body>
</html>
    
(注1)このHTML例は、動画がアクティブ化されていません。動画をアクティブ化するためには、赤字の部分の<embed>から</embed>までを
 外部JSファイル(Javascriptファイル)で書き出す必要があります。
(注2)<a>タグ部分は、動画再生と直接関係ありません。<embed>から</embed>までのコードで再生できます。
 
▼再生例1(標準 400X345)

Woode Wood: Baby - The most amazing bloopers are here
▼再生例2(縮小例 300X258)

Woode Wood: Baby - The most amazing bloopers are here

<JavaScript>タグのニコ動貼り付け方法-ニコニコ動画の場合
1.ニコニコ動画の再生画面で、その動画の「コメント」の下の「外部サイトに貼付」ボタンをクリックします。(@)
2.「ブログサイトに貼り付ける」画面がすぐ下に表示されます。つぎのどちらか(AかB)を行います。
・動画を貼り付けたい"「ブログアイコン」をクリックすると、ログインされている場合は、新規記事欄にSCRIPTタグが自動設定されます。(A)または
・「外部プレイヤー」のSCRIPTタグをコピーし、ブログの記事欄やHTMLに貼り付けます。(B)
ニコニコ動画再生画面の例
 

【ニコニコ動画】(無料動画)桜 ショートコント「赤ずきんちゃん」
 (HTMLの貼り付け例)


この動画は、340×285に縮小しています。
縮小の方法は、下の3.HTML例参照。
 
3.HTMLの例
 
ニコニコ動画<JavaScript>タグのHTMLへの貼り付け例を示します。ページの表示したい場所に貼り付けます。
前項2-B外部プレイヤーよりコピーし、HTMLに貼り付けます。 ブログでも同様にできますが、タグが設定可能なブログに限ります。
 
<html>

<body>

 <script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/1264248188"></script>
 <noscript><a href="http://www.nicovideo.jp/watch/1264248188">
   【ニコニコ動画】【無料】磯山さやかのラブラブ、磯釣り一本!第二回</a></noscript>

</body>
</html>

・サンプル動画のURL:http://www.nicovideo.jp/watch/1264248188
・動画縮小例;SRCのURLに横の長さ(w)及び縦の長さ(h)を追加します。
          http://ext.nicovideo.jp/thumb_watch/1264248188?w=340&h=285

動画関連サイト内リンク

HOMEへ  最終更新日:2012.12.21 冬至