TOP

YouTube動画の埋め込みコードを自動伸縮に改編

YouTube動画より埋め込みコードを所得し、シリウスサイトに取り付けたと
します

 

パソコン画面で見るならそれはそれで通常画面ですね
では、スマートフォンで見たならどうなっているでしょう

 

例え、レスポンシブテンプレートを使用していたとしても、YouTube動画は
画面にピシャリと収まり表示されているでしょうか?

 

そうなんですね
YouTube動画は、レスポンシブ化されていない..なんです....?

 

で、小画面対応に改行指定する手法をいくつかご案内しますが、簡単な
仕様から、パソコン、スマートフォンとも適合サイズで表示できるよう
詳細をまとめているので最後まで読んでください
(途中で止まると完成できない...です)

 

ここでの解説は、レスポンシブテンプレート、およびシリウス配布の
デフォルト、ビジネス、角丸をレスポンシブ構造に切り替えた場合にのみ有効
となり、iphone設定では使えません
当サイトは、デフォルトTPですが、レスポンシブ構造を組み込んでおり
反映が確認できることになります


 

通常埋め込みコードで表しています 420 315(ノンレスポンス)

 

さて、レスポンシブを簡単に反映させる手段としてサイズを100%に
してみました
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/KymCy2ezFt8" frameborder="0" allowfullscreen></iframe>

 

レスポンシブ反映はするもののパソコン画面では、横長になってしまいました

 

次は、 widthだけを100%、heightは315で...
<iframe width="100%" height="315" src="https://www.youtube.com/embed/Vd5rAoLAAlo" frameborder="0" allowfullscreen></iframe>

 

横長ですが、高さはありますね

でも、縦サイズは固定値のため縮小しません
ま、これでもいいんでしょうが、横サイズが気になります
これでよい方は、採用してみてください

 

 

ここまでは、簡単なやり方

 

やはり、HTML改行だけではうまく反応しないみたい...

 

次は、CSSを使いって、横、縦とも自動縮小する手順へ進みます


 

動画コードをHTMl、class指定で囲んでください

 

<div class="youtube">
<iframe width="420" height="315" src="https://www.youtube.com/embed/XFiccrmQpH8?list=RDQMO4WnBwku0Bg" frameborder="0" allowfullscreen></iframe>
</div>

 

 

スタイルシートにCSSコード追加

 

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

 

.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

 

CSSはスタイルシートで一度追記すれば、各ページに動画を置いた場合、
HTMLコードで囲めばどちらのページでも反応します

 

 

横、縦とも自動縮小~ご確認ください

 

 


 

まだまだ終わりません...最後までいって、

 

CSS指定では、サイズをwidth: 100%; height: 100%;としていますね
すると、PC画面では記事カラムサイズに反応してしまうが理由で、大きな
画面での表示となりますが...でかすぎると思われる

 

iframeコードでサイズ指定していてもCSSが優先される理由
<iframe width="420" height="315"..サイズ指定は無視されるのです

 

確かに、スマートフォンならサイズは良いでしょう
しかし、パソコンでは...deka?

 

そんな場合の対応策(不完全)ですが、100%を70に変えてみるとやや小さく
なります..けど記事サイズに対して反応するのでスマートフォンでは更に小さく
なってしまうんですね
スマーフォン画面でも70%のサイズ割合でしか表示されない...です

 

 

で、パソコンではやや小さめで表示して、スマートフォンでは画面にピシャリ
...と、合わせるにはどうすればよいか?

 

 

対処法

 

パソコンとスマートフォンで%;違いで、二つのCSS指定をすればよいのです

 

上記で掲載のコードですが、パソコン画面ではやや小さめに表示されるよう
指定値を書き換えます
width: 70%; height: 70%;にしてみました(数値は好みで変えてください)

 

そして、スマートフォンサイズへ可変するmediaコードでは、サイズに合わせ
表示されるよう100%;指定値とします

 

変更例

 

パソコンで反応する指定値は70%

 

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

 

.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 70%;
}

 

 

スマートフォンでレスポンシブ化する指定値は100%
@media(max-width:640px){
.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

 

.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

 

以上の二つをスタイルシートに置けば、2重レイアウト指定が完了します

 

● max-width:640pxについて
640は、シリウス配布のレスポンシブテンプレートの標準可変サイズを記載しておりますが、
変更している際は、合わせ修正してください

 

PCでは、最大幅でないやや小さめで表示、スマホサイズでは100%反映の
適合サイズ完成画面 パソコン画面を狭めて作用をご確認ください

 

以上で解説を終わります

 


 

YouTube動画の掲載が少ないなら作業も苦にならず...
でも、たくさんあると...大変...頑張りましょう

 


 

スポンサーリンク

 

 

YouTube動画をレスポンシブ化するコード改変とCSS指定
ユーチューブ動画をサイトに取り付ける方法
シリウスカスタマイズ

YouTube動画をレスポンシブ化するコード改変とCSS指定関連解説
シリウスに取り付けたYouTube動画を自動再生にするカスタマイズ
シリウスサイトを開いたと同時にYouTube動画をクリックせずとも自動で再生するカスタマイズ設定の取り付け解説です
YouTube動画のパラメータカスタマイズ
YouTube動画をシリウスサイトに配置するには埋め込みコードをコピーしてサイトに貼り付ければすぐに反映が確認できますね しかしサイト構成になじませたいなら 見た目を変えるカスタマイズも必要