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

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

スポンサーサイト 

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


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

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 動画の埋め込み方法


関連記事
スポンサーサイト


初めまして!
YouTubeから動画タグをコピーしブログへ埋め込みしたんですが表示されなくて検索したらここへ来ました!


タグ貼り付け後プレビューでは表示されるのですが実際に投稿されたものを見ると表示されてないんです・・・原因は何なのでしょう?
[ 2011/04/25 10:26 ] [ 編集 ]
ひこにゃん様

コメントありがとうございます。

貼り付けられたコードの内容、ソースや現象の起こっているブログのURLなどを見てみないと何とも申し上げられませんが、ご覧頂いた記事は最新の YouTubeの画面と多少異なっている点もございましたので、最新のYouTubeに対応した新しい記事を起こしましたので、宜しければ一度ご覧になってみて下さい。

FC2ブログへYouTube動画を埋め込む方法 [iframeタグ編]
http://hobbygadgets.blog137.fc2.com/blog-entry-110.html

例えばですが、何かしら1バイトでも取りこぼしているような単純なミスであれば、順を追ってやり直すだけで解決するかも知れません。(それだとプレビューにも不具合が出る可能性が高いですが、HTMLはけっこう曖昧でもなんとか表示しようとして、タグの閉じ忘れなどがあったり不完全でも表示を強行しますから)

管理人
[ 2011/04/25 21:26 ] [ 編集 ]
丁寧に説明して頂きありがとうございます!
参考にさせてもらいます(^ω^)
[ 2011/04/27 22:48 ] [ 編集 ]
コメントの投稿













管理者にだけ表示を許可する
ブログランキング
[AD] Amazon
[AD] Rakuten


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