SIRIUS（シリウス）でYoutube動画をPCに埋め込むやり方とiPhoneの画面サイズちょうどで表示させる方法

ツイート

動画は直観的にわかりやすいので取り入れてるサイトも多いですね。

特にYoutubeはその典型でしょう。

サイトに動画を貼り付けると訪問者を足止めする効果があり、
サイト滞在時間が長くなってSEO的にも有利になります。

取り入れ可能な時は積極的に取り入れていきましょう。

今回はそのYoutube動画の『埋め込み』方法、サイズ調整、
スマホ画面幅に合わせて自動でリサイズさせる方法を説明します。

①まずは埋め込みたいYoutube動画上で
右クリック→『埋め込みコードを取得』をクリックします。

②表示されたコードをコピーします。

すると下のような感じでコードがコピーできるので、
これをそのまま動画を表示したいところへペーストします。

たったこれだけです。（テキストモード編集画面で行ってください）

<iframe width="640" height="390" src="//www.youtube.com/embed/fOxX6SSQbHw" frameborder="0" allowfullscreen></iframe>

ただしこのままだとコンテンツエリアの横幅が 640px以下のサイトでは
動画が横に飛び出てしまいます。

そんな時は width="640" height="390" の部分を調整してやりましょう。

たとえば縦横それぞれ 20%ずつ小さくしたいと思ったら
width="512" height="312" といった具合に変えてあげます。

これ以外にも、スタイルシート（styles.css）に加筆で、

.movieinfo iframe {
	width: 100%;
}

という風に幅を”100%（最大でも表示枠全体）”としてしまう方法もあります。

こっちの方がラクですかね。

さて上記のYoutube動画をiPhoneで見るとどうなるか。

こう↓なります。

サイズが大きすぎて一部しか表示されてません。

これを元の動画サイズに関係なく
iPhone（スマホ）の横幅いっぱいに全体を表示させてみましょう。

それにはある決まったスタイルをスタイルシートに書き込む必要があります。

その前に、スタイルを設定しやすいように
埋め込み Youtube動画のコードを<div>ブロックで囲っちゃいましょう。

今回は”movieinfo”というクラスを付与してみました。

<div class="movieinfo">
<iframe width="640" height="390" src="//www.youtube.com/embed/fOxX6SSQbHw" frameborder="0" allowfullscreen></iframe>
</div>

この”movieinfo”というクラスにスタイルを設定していきます。

.movieinfo {
	position: relative;
	padding-top: 56.25%;
	padding-bottom:30px;
}
.movieinfo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

再度、iPhoneでチェックしてみると、
今度はコチラ↓のようにぴっちりときれいに表示されました。

以上です。