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" といった具合に変えてあげます。

 

縦横の比率は必ず同じ比率で減らしていきます。
そうしないと一方だけ幅が伸びちゃって見た目がいびつになっちゃいますから。

 

これ以外にも、スタイルシート編集に加筆で、

 

コード

.movieinfo iframe {
	width: 100%;
}

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

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

 

iPhone(スマホ)での表示

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

 

こう↓なります。

 

キャプチャ画像

 

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

 

これを元の動画サイズに関係なく iPhone(スマホ)の横幅いっぱいに全体を表示させてみましょう。
それにはある決まったスタイルを CSSに書き込む必要があります。

 

その前に、スタイルを設定しやすいように
埋め込み 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サイトスタイルシート編集」の style.css に記述します。
一番下の空いてるところにでもペーストしてください。

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

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

 

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

 

キャプチャ画像

 

以上です。

購入ページへ


TOPへ戻る