ブログ記事

freo のエントリーでYoutubeのエンベッド(embed)

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指定ができるのは嬉しいですね。

結構、簡単にできたので、ご紹介している方へ感謝の気持ちをこめて記事にしてみました。

 

ページ移動

ユーティリティ

スポンサーリンク


検索

エントリー検索フォーム
キーワード
例:abs修理、メーターフード自作

過去ログ

Feed