youtube動画をレスポンシブ作用へと実行
youtube動画の埋め込みをシリウスのレスポンシブテンプレート仕様サイトへ張り付けて
スマートフォンで見てみるとサイズ縮小(レスポンシブ化)されておりませんね
しかし、youtubeサイトで見れば、レスポンシブ化は適合作用しているのが確認できます
なぜ、youtubeサイトでは作用するはずが、シリウスでは反応しないのか?
シリウスのレスポンシブ機能が不全というわけではなく、埋め込みコード自体が
レスポンシブ発動の指示を出していないと理解しましょう
iframeを見てみますと、width 420が数値指定になっている
<iframe width="420" height="315" src="https://www.youtube.com/embed/k2b0S033o08" frameborder="0" allowfullscreen></iframe>
数値指定ならサイズは、パソコンでもスマートフォンでも固定値なので自動縮小は
しないのですね
さらに言えば、シリウスのレスポンシブテンプレート、スタイルシートにyoutube用の
可変コードは存在していない
ですので、パソコン、スマートフォンで適合合わせ表示するには、HTMLでの指定
CSSでの作動を指示する追加指定が必要になるのです
ただ、youtube動画をレスポンシブ化すると言ってもどのようにサイズ指定するかで
仕組みを知っていただく必要があります
と、いってもコードさえ理解すれば、即座の対処ができるので、詳細を以下親サイトで
ご確認ください(親サイトのyoutube動画レスポンシブ化指定解説ページです)
YouTube動画をシリウスでレスポンシブ化するコード改変.html
関連ページ
- youtube動画の片隅に画像リンクを配置してみる
- youtube動画の上、画面上に画像リンクを置いてみるとクリックされやすいというお話をもとにシリウス専用でカスタマイズしてみました 各カスタマイズをまとめています
- youtube動画上に閉じるボタン付きバナー取り付け方法
- シリウスレに設営したyoutube動画内にバナー、画像リンクを組み込んでみるというもの、お邪魔なら閉じるボタンで消し去ることもできるという閲覧者サービスの作用設定方法