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

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

Youtube動画をPCに埋め込みiPhone(スマホ)で画面サイズに合わせて表示させる

サンプル画像

 

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

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

 

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

 

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

 

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

PCでの表示

①まずは埋め込みたい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%(最大でも表示枠全体)”としてしまう方法もあります。

 

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

iPhone(スマホ)での表示

さて上記の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サイトスタイルシート編集」のstyles.css に記述します。
一番下の空いてるところにでもペーストしてください。

クラス名は変えても問題ないですがHTML側とCSS側のクラス名を必ず同一にします。

コードの内容については深く考えずにコピーペーストしてください。おそろしく複雑な内容なので多分説明しても理解できない思います。実は私も完全には理解できてません。(-.-)

 

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

 

キャプチャ画像

 

以上です。

 

購入ページへ


てっぺん