【ブロック対応完了】レスポンシブ（iframe用）

※このショートコードは、「ブロックエディタ」に対応済みです。ブロックエディタのほうを使ったほうがラクです。

YouTube動画のような埋め込みファイル（ifram）の表示をレスポンシブ対応にして、スマホでもはみ出ないようにするためのショートコードです。

もくじ［］

1 使い方
2 YouTube
3 Google Maps
4 Facebookページ

使い方

iframeタグを「responsive」で囲ってください。

[[responsive]
iframeタグ
[/responsive]]

YouTube

[[responsive]
&amp;amp;amp;amp;amp;lt;iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Vlm_2s_EHwo?start=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;amp;gt;
[/responsive]]

Google Maps

[[responsive]&amp;amp;amp;amp;amp;lt;iframe width="600" height="450" style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754723126!2d139.74323885126046!3d35.658580480102444!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1542245858106" frameborder="0" allowfullscreen="allowfullscreen"&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;amp;gt;[/responsive]]

Facebookページ

[[responsive]
&amp;amp;amp;amp;amp;lt;iframe width="560" height="315" style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwbsfan%2Fvideos%2F339759673481491%2F&amp;amp;amp;amp;amp;amp;amp;show_text=0&amp;amp;amp;amp;amp;amp;amp;width=560" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;amp;gt;
[/responsive]]

以上、「レスポンシブ（iframe用）」でした。

←般若ビルダー専用ショートコード一覧に戻る