ホビーガジェット [PC/周辺機器/サプライ/ゲーム/商品紹介/レビュー/ブログTIPS...]

パソコン、周辺機器、メモリーカード等サプライ、AV機器、家電製品、ゲーム等の商品紹介、レビュー、ショップ掲載他、ブログ運営メモ。アフィリエイト。

スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


( --/--/-- --:-- ) Category スポンサー広告 | トラックバック(-) | コメント(-)

FC2ブログへYouTube動画を埋め込む方法 [iframeタグ編] 

YouTubeの埋込コード、タグの埋め込み方法のデフォルト設定、仕様が変わりました。

過去記事で紹介した2010年12月時点では、デフォルトで「objectタグ」を使用したコードが生成されていましたが、現在は「iframeタグ」を使用したコードが生成されます。過去の記事ではobjectタグが生成される例で説明していたので、iframe版としてまとめなおしておきます。

ちなみに、貼り付け先の相性など互換保持も考慮してか、オプションで「古い埋め込みコードを使用する」にチェックを入れることによりobjectタグでのコード生成も可能になっています。

[FC2ブログへの動画の埋め込みに関する記事]
FC2ブログへ動画を埋め込む方法~YouTube編 (旧objectタグ編)
FC2ブログへの動画の埋め込み方法~ニコニコ動画編

YouTube動画をFC2ブログの記事内へ掲載する手順


1.動画を検索


まずは対象となる動画を探します。≫YouTube

2.YouTube動画の埋め込みコードを取得


FC2ブログへYouTube動画を埋め込む方法 iframeタグ


上の画面例を参考に、
「共有」をクリック
「埋め込みコード」をクリック
「埋め込みコード」の欄をクリックすると全選択され反転するのでこれをコピーします。

アメブロのアイコン、または「続き」をクリックするとFC2以外のブログ専用のコードが自動生成されるオプションもあります。(クッキーにログイン情報が保持されていれば自動的に新規記事を起こしタグがセットされたりします。)

「古い埋め込みコードを使用する」にチェックを入れるとobjectタグでコードが生成されます。

3.埋め込みコードを記事内に貼り付け


ブログの記事内へコピーしたコードを貼り付けます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ここに記事の本文があるとします。
↓これが貼り付けたコード↓
<iframe title="YouTube video player" width="425" height="349" src="http://www.youtube.com/embed/4mB_rPPw0OY" frameborder="0" allowfullscreen></iframe>
↑これが貼り付けたコード↑
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

4.動画の記事内での表示サイズを変更


上記の埋め込みコード作成時、オプションの「カスタム」で縦横サイズを指定できますが、ブログに貼り付けYoutubeのページを閉じてしまった場合や後から変更する場合、<iframe>タグ内の表示指定サイズをを任意の数値に書き換えれば自由に変更ができます。尚、表示サイズのアスペクト比(縦横比)はどんな比率にしても動画自体は正しく表示されますが、オリジナルに近い比率にしておいた方が余計な余白できなくて見栄えが良くなります。下記の例では生成したタグよりさらに小さめの幅420ピクセルx高さ340ピクセルに微調整した例を記しておきます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
<iframe title="YouTube video player" width="420" height="345" src="http://www.youtube.com/embed/4mB_rPPw0OY" frameborder="0" allowfullscreen></iframe>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

あとは、記事を保存して確認して下さい。

上記の数値に変更すると以下のように表示されました。↓


※本記事執筆時点でゲームジャンルで当日アクセス数ランキング上位だったsnideepserver様投稿の動画「【MHF】剛グレン尻尾切り2ラスタ4人剥ぎ取りコックPT【飛竜種の逆鱗】 」を例として使用させて頂きました。


[ブログ関連書籍]
■はじめてのブログ入門―Windows Vista/XP & Mac OSX対応
■驚異の集客テク! 90日で鬼のように儲けるブログ術
■アメブロをカスタマイズ 魅せるブログデザインを作ろう!


ブログランキングに参加中です。
もしこの記事が少しでもお役に立てたら,以下のどれかひとつ、クリックお願いします。
(クリック先にはジャンルの近いブログがいろいろ紹介されているので有用な情報が見つかるかも知れません)
ブログランキング・にほんブログ村へ 人気ブログランキングへ
関連記事
スポンサーサイト


参考にさせて頂きます!
[ 2013/05/29 18:19 ] [ 編集 ]
参考になりました。
[ 2013/08/06 21:14 ] [ 編集 ]
このコメントは管理者の承認待ちです
[ 2014/05/11 11:44 ] [ 編集 ]
コメントの投稿













管理者にだけ表示を許可する
この記事のトラックバックURL
http://hobbygadgets.blog137.fc2.com/tb.php/110-1b77f939

このところ毎日雪が降り続いてます。 雪かきで筋肉痛です。 今年は雪が多く、蔵王で行われている国体も途中、 雪が多すぎて中断されたようです。 他の方のブログを見ていて、YouTubeの貼付けをしてみた...
大雪の YouTube ニュースを貼付けてみました。 明朝は、凍結注意です。 これも先人の記事を参考にしました。こちら(FC2ブログへYouTube動画を埋め込む方法 [iframeタグ編]:ホビー
[2013/01/14 23:34] Very Small World
ブログランキング
[AD] Amazon
[AD] Rakuten


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。