ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

サイトにYoutubeを埋め込む(amp対応)方法のメモ

ウェブサイトやブログにYoutube動画を埋め込む方法をメモしておきます。レスポンシブとampにも対応済みです。

埋め込むだけなら楽勝です

↑このようにYoutubeの動画をサイトやブログに埋め込んでいきます。

まずは埋め込みたい動画にアクセスします。

youtube

動画上で

  1. 右クリック
  2. 動画の埋め込みコードをコピー
  3. 任意の場所に貼り付け

これだけです。このように単に動画を埋め込むだけなら簡単なのですが、パソコンやスマホの画面に最適化するためのレスポンシブ化にはもう少し手間がかかります。

Youtube動画の埋め込をレスポンシブ化する

まずは先ほどの動画の埋め込みコードを確認します↓

<iframe width="640" height="360" src="https://www.youtube.com/embed/zzmB4JSNtcQ" frameborder="0" allowfullscreen></iframe>

動画はiframeタグで囲われているので、これ全体をdivタグ(class指定あり)で大きく囲ってあげます↓

<div class="youtube">

<iframe width="640" height="360" src="https://www.youtube.com/embed/zzmB4JSNtcQ" frameborder="0" allowfullscreen></iframe>

</div>

動画の埋め込みは基本Youtubeがソースなので、class名をyoutubeとしました。

あとはcssで↓

.youtube{
position: relative;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

これでYoutube動画をレスポンシブで埋め込むことができます。

ただしampの場合

<div class="youtube">ここに埋め込みコード</div>

↑このようにしてしまうと、埋め込み動画上部に空白ができてしまうので注意してください。

詳細は以下説明します。

amp版

まずheadタグ内にscriptを設置します↓

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

あとは動画を埋め込む任意の場所に↓

<amp-youtube data-videoid="ショートコード" width="800" height="450" layout="responsive"<>/amp-youtube>

amp用のYoutubeコードを埋め込むます。

ショートコードというのは

<iframe width="640" height="360" src="https://www.youtube.com/embed/zzmB4JSNtcQ" frameborder="0" allowfullscreen></iframe>

↑この埋め込みコード内のURL(srcの中)にあるzzmB4JSNtcQのことです。

このショートコードは動画ごとで異なります。

amp版のwidthとheightはアスペクト比が16:9になればOKです。とりあえずは

width="800" height="450"

↑これで十分です。あとはlayout="responsive"があれば自動でレスポンシブ化してくれます。

amp版Youtube埋め込みコードの完成事例として↓

<amp-youtube data-videoid="zzmB4JSNtcQ" width="800" height="450" layout="responsive"<>/amp-youtube>

↑ご覧のようにdivタグで囲っていません。それも通常の埋め込みとは異なる点ですね。

なおこの動画は「こちら」からご覧いただけます。たったの14秒で終わる、短い動画です。

あとがき

iPhoneで動画投稿して、ブログで紹介していくと各メディアの融合ができると思います。今回の動画埋め込み手順はその第一歩です。

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです