• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
イイね!
2012年05月17日

【 みんカラ 】ブログにYouTube動画を貼り付ける方法 2012年度版

【 みんカラ 】ブログにYouTube動画を貼り付ける方法 2012年度版
※ 追記 2016年10月03日
現在のみんカラでは動画の埋め込み方法に変更がありましたので、これに対応した方法はこちらの記事を参考にしてください。
ワタクシの【 みんカラ 】ブログは車と運転修業の記録を残すために始めたのですが、意に反してか?PVレポートでいつも上位にくるのは、車ネタではなく暇つぶしに書いたスタイルシート関係と動画共有関係という超マニアック(笑)な内容のブログなのです。
普通の人はワタクシのような激遅運転手の修業記など興味ないでしょうから、今回も先日仕様変更があった『YouTube』ネタでページビュー稼ぎしたいと思います。(笑)


【 みんカラ 】ユーザーの中には多くの方が気になった動画やご自身の車載映像などをブログで公開されていますが、誤った貼り付け方法のため、特定のブラウザで見るとブログ全体のデザインが崩れてしまっていたり、元の動画が高画質で配信されているのに小さいサイズで貼り付けているために生かしきれていないケースなど見受けられます。
そこで、【 みんカラ 】ブログへの正しい?動画の貼り付け方を前回の説明から変更された事項を含め、再度ご紹介したいと思います。

【 みんカラ 】ブログに動画を貼り付ける方法としては、 みんカラ サポートブログでも動画(YouTube)の張り付け方について解説されてますが、その方法〔ブログ編集ページにある動画ボタンをクリックして、Explorer ユーザープロンプト(スクリプト プロンプト)の入力欄に動画のURLをコピペする〕の場合、簡単ではありますが今のところYouTube 限定で、しかも動画埋め込みサイズが幅425 × 高さ355 の4対3のアスペクト比でしか選べず、16対9の動画の場合、そのままでは動画の上下に黒帯が表示されてしまいます。また、フルスクリーン表示できないなど自由度がありません。
そこでワタクシは編集ページ本文に直接埋め込み用のEmbed コードをコピペ(コピー&ペースト)する方法をお勧めするのですが【 みんカラ 】ブログに動画を貼り付ける場合に注意することがあります。

通常、ウェブサイトに動画を埋め込むには<object ~></object>や<embed ~></embed>、または<iframe ~></iframe>や<script ~></script>などのHTMLタグを使用して張り付けますが、 【 みんカラ 】ブログでは、<object ~></object>や、<iframe ~></iframe>や<script ~></script>などのHTMLタグは、強制的に無効になる設定になっており、HTML表記が文字列として表示されるだけです。

埋め込み用のHTMLコードに<embed ~></embed>を使っているものは、コードをそのままコピペするだけで問題はありませんが、<iframe ~></iframe>や<script ~></script>タグを使っているものは【 みんカラ 】ブログに動画を貼り付けることが出来ません。

一般的な動画共有サイトの多くでは、<object ~></object>タグを埋め込み用のコードとして用いていますが、【 みんカラ 】ブログの場合、これをそのままコピペすると、動画を貼り付けることはできるものの上記の理由で動画の前後に<object ~></object>という文字列として表示されてしまいます。
そこで、コピペした後その<object ~>と</object>部分を削除して下さい
と、ここまでは 実行されている方は多いのですが、<param ~></param>タグ部分もできれば削除して、<embed ~></embed>タグ部分だけを残すようにして下さい。
<param ~></param>タグは削除しなくても映像は表示できますし、「Internet Explorer」や「Safari」,「Google Chrome」では問題なく表示できますが、「Netscape」や「Firefox 3.1」以下のブラウザで見ると、バグ?によりブログ全体のレイアウトが崩れてしまいます。
最新の「Firefox」ではバグが修正されレイアウトが崩れることがなくなりましたが、旧いバージョンの「Firefox」を使用している人のことも考慮してこの部分も削除する事をお奨めします。

◇ YouTube 動画貼り付け方法

『YouTube』の動画を貼り付ける場合、
まず、貼り付けようとするその動画の単独ページにアクセスします。

動画の下にある 共有 と表示されたボタンをクリックします。

次に 埋め込みコード と表示されたボタンをクリックすると、下記のカスタマイズオプションを含んだ埋め込みコードが表示されます。
  • □ 動画が終わったら関連動画を表示する
  • □ HTTPSを使用する [
  • □ プライバシー強化モードを有効にする [
  • □ 以前の埋め込みコードを使用する [

「 □ 以前の埋め込みコードを使用する 」をクリックしてチェックマークをいれます。
※ 2012年12月22日 追記
またYouTubeの仕様変更があったようで、広告付きの動画では「 □ 以前の埋め込みコードを使用する 」と表示されなくなったようです。

動画の埋め込みサイズを選択、または指定します。
(【 みんカラ 】ブログの標準のスタイルシートでは、ブログ記事のスペースは幅 580pxのサイズにデザイン設定されていますので動画埋め込みサイズも幅 580以下になるようにしてください)

出力された埋め込みコードをコピー(右クリックして「コピー」を選択)します。

次にブログ編集ページに進みます。
ブログ編集ページの下の方にある『HTMLタグ』欄の『有効』にチェックマークが付いている事を確認します。(チェックマークが付いていなければ、クリックしてHTMLタグを有効にします)


ブログ編集ページで編集本文中の 動画を貼り付けたい箇所でクリックし、コピーした埋め込みコードをペースト(右クリックして「貼り付け」を選択)します。

実線部分の<object ~></object>タグと<param ~></param>タグを削除して<embed ~></embed>部分だけを残すようにします。
<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/oKK_E_SoJaA?version=3&amp;hl=ja_JP&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/oKK_E_SoJaA?version=3&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed> </object>


フォトギャラリーで解説したページ
http://minkara.carview.co.jp/userid/310698/car/292510/3105064/photo.aspx
これで【 みんカラ 】ブログへの正しい?動画の貼り付け方が分かりましたでしょうか?
分かったところで?、次にYouTubeの動画を貼り付ける際の裏技的なカスタマイズ方法(パラメータオプション)を紹介します。

まずカスタマイズする上で覚えなくてはならないHTMLコードの見方があります。
<embed src="http://www.youtube.com/v/***********?version=3&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
上記の埋め込み用のHTMLコードで、下線が引いてある部分がYouTube 動画 SWF の URLです。
その中の http://www.youtube.com/v/ と ? の間にある ***********部分の11文字がその動画のVIDEO_IDで、それ以降の ○○=値 とあるのがパラメータです。
そのパラメータの値を変えたり、新たなパラメータを設定する事によってカスタマイズする事ができます。
ビデオ_ID以降のパラメータは省略することもできますが、その際はYouTubeが設定したデフォルト(初期設定)値になります。 複数のパラメータを指定する場合、間に &amp;(若しくは&) を入れます。
因みに上記例のパラメーターは、
  • version=3は、AS3プレイヤーで表示する。
  • hl=ja_JPは、言語コードは日本語。
  • rel=0は、動画再生が終わったら関連動画を表示するしない
と言う事を意味してます。
また、width="560" height="315"は動画埋め込みサイズを幅"560"、高さ"315"の大きさに設定することを意味してます。
allowfullscreen="true"はフルスクリーン表示を許可することを意味しています。

◇ 動画埋め込みプレイヤーのタイプを指定するパラメータ
version=2
version=3
YouTube 動画プレーヤーには、ActionScript 2 playerActionScript 3 playerHTML5 player の3タイプのビデオプレーヤーがあります。
HTML5 playerは、これに対応したブラウザではFlashがなくても動画を再生でき、『Google Chrome』で見ると、広告付き以外の動画では再生速度を変えることもできるといったメリットがあるのですが、残念ながら【 みんカラ 】ブログでは<iframe></iframe>タグの埋め込みコードを使う事が出来ないためこの動画プレイヤーで表示させることができません。
しかしながらAS2プレイヤーAS3プレイヤーの使い分けは可能です。
AS2プレイヤー
AS3プレイヤー
AS2プレイヤー
<embed src="http://www.youtube.com/v/9kC0VfWkAbQ?version=2&amp;fs=1&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="290" height="190" allowscriptaccess="always" allowfullscreen="true"></embed>
AS3プレイヤー
<embed src="http://www.youtube.com/v/9kC0VfWkAbQ?version=3&amp;hl=ja_JP&amp;rel=0">theme=light" type="application/x-shockwave-flash" width="290" height="201" allowscriptaccess="always" allowfullscreen="true"></embed>
5月のYouTube仕様変更によりAS3プレイヤーがデフォルトになりましたので、version=3を指定しなくても(省略しても)ActionScript 3 playerで表示されることになりました。
逆にAS2プレイヤーで表示したい場合には、version=2を指定する必要があります。

AS2プレイヤーAS3プレイヤーの見た目の違いは動画コントロールバーのデザインと高さが若干違う程度ですが、デザインや機能をカスタマイズすることも可能です。
AS2プレイヤー
AS3プレイヤー
詳細は「YouTube 埋め込みプレーヤーの外観をカスタマイズ」をご覧下さい。

◇ 再生位置を指定するパラメータ
start=値
このパラメーターを設定すると、動画の再生開始位置を秒単位の値で指定することができます。
例えば下の動画で動画の先頭から約2分27秒進めた位置から再生開始させたい場合、60秒×2+27秒=147秒なので&amp;start=147とYouTube 動画 SWF URL の末尾にパラメータを追加することで可能になります。
<embed src="http://www.youtube.com/v/GagW5fYE62M?version=3&amp;hl=en_US&amp;rel=0&amp;start=81" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
動画再生開始位置指定は「埋め込みプレーヤー」だけでなく、YouTubeの動画再生ページにリンクする場合でも指定可能です。
指定方法は、YouTubeの動画再生ページにリンクするURLの末に 「#t=分値m秒値s」を追加します。
http://www.youtube.com/watch?v=GagW5fYE62M#t=1m21s


end=値
今年5月から新たに設定されたパラメータで、今のところAS3プレイヤーだけの対応のようです。
このパラメーターを設定すると、動画の再生終了位置を秒単位の値で指定することができます。
<embed src="http://www.youtube.com/v/CMcWk5w_37w?version=3&amp;hl=ja_JP&amp;rel=0&amp;end=82" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>

start=値end=値を併用して指定すると、例えばピットアウトからピットインまで撮影した長時間の車載映像の内のベストラップだけ再生させるという事も可能になります。

<embed src="http://www.youtube.com/v/oKK_E_SoJaA?version=3&amp;hl=ja_JP&amp;rel=0&amp;start=21&amp;end=65" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>


◇ 動画情報の表示を設定するパラメータ
showinfo=値
現在のYouTube「埋め込みプレーヤー」の動画には、再生開始前に動画の上部にタイトルが表示されるようになっています。
この動画情報は表示しないようにすることが、showinfoパラメータの値を0に指定することで設定できます。
タイトルが表示されると、動画の内容が予め想像できてしまうような場合などに使うと効果的です。(笑)
<embed src="http://www.youtube.com/v/sAsu76DbEAc?version=3&amp;hl=ja_JP&amp;rel=0&amp;showinfo=0 type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="never" allowfullscreen="true"></embed>

他にも違った機能をもったパラメータなどもありますので、興味がある方は英語になりますが下記サイトを参照して下さい。
関連情報ホームページURL:
https://developers.google.com/youtube/player_parameters?hl=en

ブログ一覧 | Video Sharing | パソコン/インターネット
Posted at 2012/05/17 17:16:27

イイね!0件



今、あなたにおすすめ

この記事へのトラックバック

youtubeの埋め込みについて詳しく ...」 From [ クルマ好きメシ好きの日記 ] 2012/05/23 11:30
この記事は、【 みんカラ 】ブログにYouTube動画を貼り付ける方法 2012年度版について書いています。
ブログ人気記事

江戸東京たてもの園便り2017夏 ...
nanamaiさん

「箱根ターンパイク/椿ライン/芦ノ ...
yoyolegalegaさん

今日は楽しい「24丸昇レトロ自販機 ...
中2の夏休みさん

[SurLuster News]
シュアラスターさん

富士トリコ2017に参加してきた( ...
根崎さん

今週末はスバルだよ偲ぶ会☆(大阪府)
VALENTIさん

この記事へのコメント

2012/12/03 15:34:07
こんにちは

勉強になりました!

お聞きしたいのですが
関連動画を省こうと re=0を削除したんですが
省けません
どうしたらいいのでしょうか?
コメントへの返答
2012/12/03 17:25:19
コメントありがとうございます。

ごめんなさい。私の記入ミスでした。冷や汗2
「?rel=0」が動画が終わったら関連動画を表示しない方で、YouTubeが設定したデフォルト(初期設定)値はrel=1なので、これを削除すると必然的に「動画が終わったら関連動画を表示する」になってしまいます。冷や汗

それと今、気付いたのですが、貼り付けようとするその動画の単独ページにアクセスしても、“□ 以前の埋め込みコードを使用する ”と表示されなくなっていますね!
2013/03/29 22:23:02
すごい便利です。
ありがとうございました!
コメントへの返答
2013/03/30 09:07:32
hononaさん、コメントありがとうございます。わーい(嬉しい顔)
お役に立てましたでしょうか。
現在価格を調べてみる

おすすめアイテム

 
 

プロフィール

みんカラ 旧ニックネーム : 銀色S2000はーどとっぷ  30歳を過ぎた或る日、ドライビングスクールに参加したことが切っ掛けで、走りに目覚めてしまいました。...
みんカラ新規会員登録

ユーザー内検索

<< 2017/9 >>

     12
3456789
10111213141516
17181920212223
24252627282930

リンク・クリップ

Traditional Japanese Garden Styles 
カテゴリ:My Web Site
2009/11/28 11:24:50
 
My Favorite Things 
カテゴリ:My Web Site
2007/08/08 15:38:09
 

ファン

61 人のファンがいます

愛車一覧

トヨタ 86 トヨタ 86
『新・すーぱードライビングテクニック養成マシーン』 GRADE :GT TYPE ...
三菱 アイ 三菱 アイ
『スーパー通勤快速号』 型式 CBA-HA1W 2009(H21)年式 GRADE:T ...
ホンダ S2000 ホンダ S2000
『すーぱードライビングテクニック養成マシーン』 ’99年式の初期型です。 タイヤ・ ...
BMW 3シリーズ クーペ 『黒い36くーぺ2号』 (BMW 3シリーズ クーペ)
『黒い36くーぺ2号』 ’96年式の E36 328i くーぺ

QRコード

QRコード
このブログを携帯でご覧になれます
ヘルプ利用規約サイトマップ
©2017 Carview Corporation All Rights Reserved.