2021/17/7
Local by flywheelのサイトをDropbox経由で複数端末で管理するcssでもできるんですが
jqueryの方がいいという場合はこういう感じでいけます。
youtubeとかその他動画の埋め込み用途には使えると思います。
以下のコードでは、
articleというクラスの中のiframeに対して、幅100%で16:9の比率を保ったままレスポンシブにしています。
一応解説すると、eachで全てのiframeを取得し、取得した全てに対してまずは幅を100%にしています。
その状態でそれぞれの幅をピクセルで取得し、比率で16:9に合うように高さを算出しています。
まあコードは単純なんですが、毎回書くのも面倒なので。
クラス名とか100%のところは好きに変えてください。
function iframefit(){ $('.article iframe').each(function(){ $(this).css('width','100%'); var width = $(this).width(); var height = width*(9/16); $(this).css('height',height); }); } $(document).ready(function(){ iframefit(); }); $(window).resize(function(){ iframefit(); });
質問やご指摘など気軽にどうぞ