【コピペ厳禁！Youtube動画のレスポンシブ埋め込みコード】
Youtube動画のページで共有ボタンを押して
埋め込み用のコードをコピーします。
<iframe width="560" height="315" src="...."></iframe>
これをブログやホームページに埋め込むと
src="..." で指定された動画がページに表示
されますが、スマホで表示すると横幅が
画面をはみ出したり、縦と横のサイズの
バランスが崩れたりします。
上記のタグに、縦横のサイズが固定で
記述されているためです。
そこで、スマホの画面サイズに応じて
縦横のサイズが自動で縮小するように、
スタイルシート（CSS）を使って
上記のタグに記述されたサイズを
「上書き補正」
することができます。
↓そのテクニックがこちら。
■HTML <div class="movie-container"> <iframe width="560" height="315" src="...."></iframe> </div>
■CSS .movie-container { position: relative; height: 0; padding-top: 56.25%; overflow: hidden; } .movie-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
↑このコードをコピペすればいいですよ～。
というようなことが、
コピペするだけで何の知識も身に付かない
ブログにはよく書いてあります。
実際、ブログ用の無料テーマで有名な
STINGER8で上記のコードをコピペすると、
正しく表示されません！！
なぜかというと、STINGER8は
Youtubeの埋め込みタグを検出すると
自動的に
<div class="youtube-container"> <iframe width="560" height="315" src="...."></iframe> </div>
のように、iframeタグを囲ってしまい、
スマホ対応にしてくれるからです。
すると、
■HTML <div class="movie-container"> <iframe width="560" height="315" src="...."></iframe> </div>
と書いていても、ブラウザに表示される際に
■HTML <div class="movie-container"> <div class="youtube-container"> <iframe width="560" height="315" src="...."></iframe> </div> </div>
のように変換されるので、
CSSと干渉してしまいます。
すると、意図していない謎の余白が
画面に出てしまったりします。
～～～～～～～～～～～～～～～～～
この投稿はコピペしても無駄です！
～～～～～～～～～～～～～～～～～
上記のコードをそのままコピペしても
ゼッタイにうまくいきません。
なぜなら、ブログの投稿は半角の
スペースが反映されないので、
代わりに全角のスペースを使って
字下げをしているからです。
そして、HTMLやCSSの文法では、
全角のスペースはエラーになります。
ですから、コピーしてもダメです。
～～～～～～～～～～～～～～～～～
コピペコードの本質を見抜こう！
～～～～～～～～～～～～～～～～～
コピペコードの本質は、
Youtubeのiframeタグの外側を囲むタグとiframeタグの両方にCSSを指定する。
ことにあります。
そのため、iframeタグを囲むタグを自動で挿入してくれるテーマの場合は、
自分でiframeタグを囲むタグを記述するべきではありません。
先ほど説明したように、
テーマのほうで用意してくれている
CSSと干渉を起こしてしまいます。
これが、何でもコピペすれば上手くいく
わけではないという１つの例です。
コピペコードには必ず本質があります。
その本質をあなたのサイトの構造に
あわせて（必要ならば）書き換えること。
それができるスキルを身に付けると、
コピペコードは本当の意味で
あなたの役に立つでしょう。
PR
CODEMYのマンツーマンレッスンでは、WordPressや
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
『WordPressのツボとコツがゼッタイにわかる本』
▼Amazonで概要を見る
http://amzn.to/2nd7Ia5
『ホームページ作成のツボとコツがゼッタイにわかる本』
▼Amazonで概要を見る
http://amzn.to/2bXJkbs
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy
