エントリー

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

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

 


スポンサーリンク

関連エントリー

ページ移動

ユーティリティ

スポンサーリンク


新着エントリー

リアコンソールトレイの蛇腹の蓋の修理(BMW E46)
2022/08/06 16:09
ルームライトを専用LEDバナーに変更(BMW E46 E83 E84 E86 E63 E64)
2022/07/22 13:18
WAKO’S エンジンフラッシングオイル(E355)を使ってみた
2022/07/12 19:17
ワンウェイバルブを改造してクランクケース減圧バルブを作成してみた
2022/07/11 15:56
経年劣化やホースバンド不良による各種シリコンホース交換
2022/07/07 20:12
チャコールキャニスターベントバルブの制御(BMW E46)
2022/07/05 11:47
RECS後のガソリン添加剤GA-01(BMW E46)
2022/07/02 08:22
Wako's RECSしてきました!(BMW E46)
2022/06/30 09:53
ブレーキフルード交換(BMW E46)
2022/06/28 09:00
M50周年 エンブレム
2022/06/28 08:49
エンジンルームを綺麗にするグッズ(100円均一)
2022/06/28 08:26
車が満23歳になりました!
2022/06/22 08:08
オイルフィラーキャップの交換(BMW E46)
2022/06/15 12:35
6年ぶりにバッテリー交換。初めてのVARTAバッテリー(BMW E46)
2022/06/14 13:24
スロットルバルブ BOSCH 99760511501(0280750008/0280750474)売ります
2022/06/07 09:46
ブレーキブースターホース交換(BMW E46)
2022/06/02 20:11
ヘッドライト光軸調整(BMW E46)
2022/06/02 19:42
時は来た!(笑)オイル添加剤RING-EEZE PLUS(リングイーズプラス)を試す
2022/05/30 08:14
BMW DISA 11611440049 売ります
2022/05/28 08:49
これで全部LED化完了!E46フロントヘッドライトのLED化(その17)
2022/05/25 23:27

検索

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

過去ログ

Feed