ような最適な状態にするにはhtmlにもCSSにも一工夫必要です。動画をいかなる画面サイズでもはみ出させず、かつ縦横比を守らせるにはiframe要素だけでは実現できません。そこでiframe要素をdiv要素で囲います。100%;}上記がCSS内容です。持つ親であるdiv要素のheight(高さ)は初期状態ではauto値です。子要素の大きさいかんで縦幅が決まります。指定されていますが、marginやpaddingのパーセンテージ指定というのは親要素の横幅を基準に算出されます。いうのは、親のdiv要素の横幅の56.25%ということですね。before疑似要素の横サイズはdisplayプロパティのblock値のデフォルトである100%、縦サイズはpadding-topの働きにより横幅の56.25%になっています。持つ親要素はこの子となるbefore疑似要素に広げられて高さが自身の横幅の56.25%となります。常に維持するボックスが完成します。そのボックス内にiframe要素を親の大きさに対し縦横100%、つまり親と同じ横幅と同じ縦幅を指定してabsoluteで絶対配置を行えば、iframe要素は常に同じ比率を維持できるというわけです。このあたりの仕組みの理屈は難しいので興味のある方だけどうぞ(最初に言えば良かったが)私のテンプレートをご利用中の方は既にこのレスポンシブ動画用のCSSが記載されています。指定すればCSSの追加は行わずにレスポンシブ動画になりますので是非ご利用ください。まとめ動画に限ったことではありませんが、「スマートフォンで何かがはみ出してるかもしれない」と意識しながら記事を書くことは大事だと思います。今はパソコン閲覧よりもスマートフォン閲覧の方が多い時代なので当たり前。CSS追加に関して、スマホ版を使用している方はそのスマホ版の方に記述しないと意味がありませんので注意してください。私のテンプレートをお使いの方でレスポンシブ設定を済ませている方はこの件について特に何かする必要はありません。過去に掲載した動画も画面内に収まるようになっているはずです。言えば新規投稿分についてレスポンシブ動画指定の独自クラスを採用するかどうかご検討を。追加すればスマホでの見た目を確認できるわけですから、怠らずしっかり確認されることをおすすめします。0まだコメントはありません。yet.コメントに関する注意事項テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。ある質問をまとめているページも事前にご参照ください。Explorerはサポートしておりません。メールでの返信をしておりません。