freo のエントリーでYoutubeのエンベッド(embed)
- 2016/06/18 01:50
- カテゴリー:freo関連
freoのエントリー(ブログ記事)でYoutubeの動画を簡単にエンベッド(埋め込み)する方法はないか色々と調べてみました。
プラグイン的なものもあるようですが、説明がややこしいのばかりなので、ちょっと却下。
で、エントリーを書くところにあるHTMLボタンを押して、こちらの方の説明されているように動画を埋め込みたいところにHTMLを挿入するのが一番簡単のようです。
iPhoneに対応するには、css/iphone/commons.cssに
.youtube iframe {
max-width: 300px;
height: auto;
border: none;
}
を追加して、動画の埋め込みは
<div class="youtube"><iframe src="https://www.youtube.com/embed/Aj9gAztaB28" title="Haruka Hummingbird - 「炎の花」PV - YouTube" width="540" height="325"> </iframe></div>
のようにHTMLを挿入。(上記の例は、こちらで埋め込んだYoutube動画です。)
この方の記事では、540ピクセル幅がよいとのことでしたが、自分のシステムではmarginがずれてしまうので、
css/default.cssに
.youtube iframe {
margin: 0px 0px 0px -5px;
}
とだけ適当に追加しました。
この方法で、iPhoneでもうまく表示できました。
ちょっとテストで、たまたま見つけた、大好きなドラマ「夏に恋する女たち」の大貫さんが歌っている主題歌を挿入。笑
以下は挿入したHTMLです。
<div class="youtube"><iframe src="https://www.youtube.com/embed/y2Rj2Y7XH0s" title="taeko ohnuki - 夏に恋する女たち" width="540" height="325"> </iframe></div>
挿入したときのtitle指定ができるのは嬉しいですね。
結構、簡単にできたので、ご紹介している方へ感謝の気持ちをこめて記事にしてみました。