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

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

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