ホビーガジェット [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日で鬼のように儲けるブログ術
■アメブロをカスタマイズ 魅せるブログデザインを作ろう!


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


スポンサーサイト

FC2ブログへ動画を埋め込む方法~YouTube編 

初めてFC2ブログへ動画のリンクを貼り付けてみる。
テストで掲載する動画は、YouTubeのトップに紹介されていた、「ユビキタスネットワーク時代の画像認識インタフェース - ClearPlate : DigInfo 」というコンテンツを使用させて頂きました。

※YouTubeのインターフェイス仕様の変更により、現在のYouTubeの埋め込みコード作成の画面はこの記事で紹介する内容とは異なっています。最新の説明は以下の記事をご覧下さい。 ≫FC2ブログへYouTube動画を埋め込む方法 [iframeタグ編]

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

1.動画を検索

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


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

動画の埋め込みコード取得

上の図のように、動画のすぐ下にある、「埋め込みコード」をクリックし、その下に表示されるコードをコピーします。

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

ブログの記事内へコピーしたコードを貼り付けます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ここに記事の本文があるとします。
↓これが貼り付けたコード↓
<object width="640" height="385">
<param name="movie" value="http://www.youtube.com/v/pj2p9SQ0sk4?fs=1&amp;hl=ja_JP"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/pj2p9SQ0sk4?fs=1&amp;hl=ja_JP"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="640" height="385"></embed></object>
↑これが貼り付けたコード↑
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


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

ブログのテンプレートの記事の幅に収まるように、表示するサイズを変更する場合、<object>タグ、及び<embed>タグ内の表示指定サイズをを任意の数値に書き換えます。尚、表示サイズのアスペクト比(縦横比)はどんな比率でも動画自体は正しく表示されますが、オリジナルに近い比率にしておいた方が余計な余白できなくて見栄えが良くなります。下記の例ではこの記事の幅500ピクセルに収まるよう、幅を480としてみます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
<object width="480" height="288">
<param name="movie" value="http://www.youtube.com/v/pj2p9SQ0sk4?fs=1&amp;hl=ja_JP"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/pj2p9SQ0sk4?fs=1&amp;hl=ja_JP"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="480" height="288"></embed></object>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

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




■FC2ブログではじめるこだわりブログ第3版(FC2blog公式ガイド) ■はじめてのFC2ブログ―無料でかんたんブログ作成 Windows7/Vista/XP/Mac OSX (BASIC MASTER SERIES) ■さすが!と言わせる FC2ブログ徹底攻略術 第2版

<検索用キーワード>

動画 埋め込み方法 貼り付け方法 ユーチューブ 動画リンク BLOG動画表示 記事に埋め込む 日記に埋め込む 動画を記事に貼る you tube 動画の埋め込み方法




ブログランキング
[AD] Amazon
[AD] Rakuten


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