Blogger ガジェット「動画バー」はダメだ!Youtubeを横幅ピッタリにするには?

youtube

Google Bloggerのガジェットにある
「動画バー」
Youtubeのチャンネルや人気動画、キーワードなどで お勧め動画をサイドバーなどに並べることができて私も自分のチャンネルを紹介してたのですがテンプレと相性が悪く前々からなんとかしなくては!と思ってました。

スポンサーリンク

動画バーの欠点

何が悪いって

blogger 動画バー1

このブログのテンプレートに設置すると
縦に並ばず横になってしまう!(T_T)
オマケにサイズもとても小さくて見栄えが悪い。

blogger 動画バー2

もう一つのブログではBloggerのデフォルト・テンプレートを使用してるので ちゃんと縦のバーには縦に並んでくれますが、表示がちょっと小さく再生ボタンも無いサムネイルだけで
これだと動画だと分かりにくりですよね。

ずっと後回しにしてきたけど、やっと「動画バー」とサヨナラして
手動で「埋め込みコード」を入れることにしました。

 ガジェットへの Youtube 動画埋め込みコード

まずは、一番下のガジェットをご覧下さい。
このガジェット「MY VIDEO」で解説するとコードは

 説明

width="100%"はバーの横幅がブログによって違うため100%にすることで一番綺麗に収まると思います。

height="200"は高さが200pxということで100%だと かなり狭く横長に見えたので広めに設定しました。ここの数字はお好みで設定して下さい。

embed/の後ろ1ri3YUjOnlIが動画のURLのIDです。
Youtubeの再生ページのアドレス
https://www.youtube.com/watch?v=1ri3YUjOnlI
↑の赤部分になります。

IDの後ろ、?showinfo=0を付けることで動画の上側の帯「動画情報」を消してサムネイルを見やすくしました。

例えば
Youtubeから共有Blogger用のコードを普通に貼ると

 ↓こんな感じですが

?showinfo=0を付け足すことで

 ↓こうなります。


記事内へ貼付けた場合はサムネイルが大きいので帯もあった方がいいと思いますがサイドバーへ設置した場合は小さくなるので  見やすさを考えると無い方がスッキリして良いような気もします。
お好みでどうぞ♪(^^)

他にも下側の帯を消したり色を変えたりもできるようです。
↓こちらのサイト様を参考にさせていただきました。
知っ得!YouTubeの動画埋め込みコードのパラメーターまとめ1 – 見た目のデザインをカスタマイズ編: 横浜ピアノ教室 福田音楽教室 Webサイト管理人のブログ


blogger 動画バー3

これで以前の「動画バー」と比べると
かなり大きく見やすいサムネイルになりました。
↓このブログの下側へ設置したガジェットには
ご覧のようにタイトル3つの動画を並べることにしました。

各コードを<br />で改行するだけです。
全部のコードは、

↑このコードをコピーして
タイトル部分と動画のID部分を書き換えて
Bloggerのレイアウト→ガジェットを追加から
HTML/JavaScriptを選択してペーストするだけです。

youtubeサイドバー

あとは、お好みで各タイトルの文字
font size="3"の大きさ
color="#000000"で好みの色へ変更して下さい。

お疲れ様でした。(^^)

おすすめ

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る