はてなブログにYoutubeを埋め込んでみよう
おすっ！つな（@tu_na_69）です(*´▽｀*)
はてなブログのサイドバーにYoutubeの動画を埋め込んでみました。
ブログにYuotube動画を埋め込みたい
以前、こんな記事を書かせていただいことを覚えているでしょうか。
好きな邦ロックを紹介しようとはじめたこのブログなのですが、結局のところ、うまく紹介できないというジレンマを抱えながら、だったらTwitterで毎週おすすめ曲を紹介してみようとはじめた＃金つなろっくですが、フォローしてくださっている方はご承知のとおり、投稿できない金曜日もあったりして（その時は＃土つなろっくになることも）、文章にするのは難しいけれども、このサイトを通じてみなさんとバンドをつなぐ手立てはないものかと、それはもうずっと考えていたところ、先日ふと思いついたのです。←一文が長いっ
ブログにお気に入り曲のYoutube動画を埋め込んだらいいんじゃないの？
みなさんに見てもらいやすい場所はどこだろうと考えて、サイドバーにYoutube動画を埋め込んでみました。
みんなに曲を聴いて欲しいから、これまで広告を設置していたベストポジションに埋め込んでいます。
PCではサイドバーに、モバイルでは記事のさらに下に表示されます。
お時間のある方はぜひ1曲聴いていってくださいね。
動画はギガ消費しますので、Wi-fiあるところでゆっくり見てね。
前置きが長くなりましたが、Youtube動画をサイドバーに埋め込む方法です。
Youtube動画をサイトに埋め込む方法
お気に入りの1曲を紹介しながら進めたいと思います。
- provided courtesy of iTunes
こちらの動画をモデルに、はてなブログにYoutube動画を埋め込む方法をふたつ紹介します。
①Youtubeから埋め込みコードをコピペ
埋め込みしたい動画のタイトル右にあるアイコンから「共有」をクリックします。
ここで「埋め込む」をクリクします。アイコンを選択するだけで、TwitterやFacebookでも簡単に共有することができますよ。
「埋め込む」をクリックすると、このような埋め込みコードが表示されます。
コードをコピーします。オレンジの矢印の部分、どちらをクリックしてもＯＫです。
動画を埋め込みたい場所にコードを貼り付けます。
ブログ内であれば「HTML編集」で好きな場所に。
サイドバーであれば、「デザイン」→「カスタマイズ」→「サイドバー」→「モジュールを追加」で貼り付けます。
②編集ページアイコンから
まず、編集ページのサイドバーのアイコンに「YouTube貼り付け」を追加します。
動画を追加したい個所にカーソルを合わせて、「Youtube貼り付け」アイコンをクリックします。
「選択ウインドウを開く」をクリックします。
キーワードを入れて検索します。
表示一覧から、好きな動画を選び「選択」をクリックすると完了です。
ただ、このキーワード検索がわたしは少し使いづらくて(;^_^A
例えば、ふだんYoutubeで検索するときは、バンド名を入力すると新しい動画や人気の動画、公式動画など上位に表示されるのですが、はてなブログの編集アイコンの表示順位はわかりづらく、欲しい動画がなかなか表示されないことも多いんですよね。
キーワードをいくつか設定してあげた方がいいと思います。
まとめ
はてなブログにYoutube動画を埋め込むふたつの方法を紹介しました。
埋め込んだ動画のコードを見ると、どちらも同じものであることがわかります。使いやすい方で試してみてください。
また、埋め込んだ動画を自動再生する方法などもあるようですが、ギガを消費してしまうので、あまりおすすめしません。
今回紹介したやり方では、サイドバーに埋め込んだ際にサイズオーバーしてしまいます。また、モバイルで開いた時に、画面が入りきらないない時の対策として、画面に合わせてサイズが自動調整されるようなレスポンシブ対応はこちらの記事で紹介しています。
記事を紹介してくれたサイト
この記事が参考になったと言及してくださったサイトを紹介しています。ありがとうございます。
