賢威にyoutube動画を埋め込む方法(スマホ表示の幅も合わせる)

この記事は約3分で読めます。

  • LINEで送る

youtube動画埋め込み

ブログにyoutube動画を埋め込む方法を説明します。
タグを埋め込むだけで完了なので、非常に簡単です。

youtubeからタグを取得して貼り付けるだけ

賢威の公式動画を例としてお借りして貼り付けました。
貼り付け方を順番に説明します。以下の4手順で完了します。

youtubeを開いて、動画を探します。

youtube動画埋め込み

貼り付けたい動画ページの「共有」タブをクリックします。

youtube動画埋め込み

「埋め込みコード」をクリックします。

youtube動画埋め込み

サイズやオプションを選択し、動画コードを取得します。

これで、上記のように動画が埋め込まれます。貼り付けたコードは以下です。

<iframe width="560" height="315" src="//www.youtube.com/embed/M5te3aXjWd8?rel=0" frameborder="0" allowfullscreen></iframe>

サイズは、ブログの幅に合うように選択してください。
選択肢に合う幅がなければ、「width=”560″ height=”315″」を直接編集すれば、
好きな動画サイズにすることは可能です。ただし、縦横比率は自分で計算する必要があります。

スマートフォンでも動画の幅を収める

youtube動画埋め込み

ここでひとつ気をつけることとして、スマホ表示があります。
レスポンシブデザインを採用していると、スマホで動画表示が崩れます。
レスポンシブデザインでも、上の画像のように指定した幅で表示されます。

そこで、賢威ではスマホでの表示用にタグがしっかり準備されています。
先ほどの動画タグを、以下のように囲むだけです。

<div class="v-wrap">
<iframe width="560" height="315" src="//www.youtube.com/embed/M5te3aXjWd8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

CSSのスタイルはこのようになっています。
「外観 > テーマ編集」の「mobile.css」で確認できます。

#main-contents .v-wrap{
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 56.25%;
	padding-top: 30px;
}

#main-contents .v-wrap iframe,
#main-contents .v-wrap object,
#main-contents .v-wrap embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

youtube動画埋め込み

これで、レスポンシブデザインの表示でも動画を画面幅におさめて表示できます。

  • LINEで送る

コメントを残す

このページの先頭へ