Youtube動画のURLをテーマに挿入して、youtube動画を表示させる場合、スマートフォン等のデバイスでも、レスポンシブで横幅をフィットさせて表示させるには、cssを調整する必要があります。
この処理がなされていないテーマでは、デバイスによっては、動画がブラウザをはみ出てしまったり、動画が縮小されずに左右が切れた状態で表示されてしまいます。

 

Youtube動画のレスポンシブ対応にはさまざまな方法があると思われますが、
isotypeテーマでは、16:9の比率の動画に対して、横幅に対する56.25%を高さとするために、動画を囲むフレームに対して、

padding-bottom: 56.25%

というcssを適用するベーシックな方法で対応しています。

 

下記の動画サンプルをご覧いただくと分かるように、ブラウザのサイズに関わらず、youtube動画プレーヤーの横幅がフィットされて表示されます。

【Youtube動画のレスポンシブ対応サンプル】

【URL直接指定】

 

【iframe】



 

iframe版のレスポンシブにも対応しました。(2015.8.7)

エディタ内にiframeタグが挿入されると、モバイルデバイスについて自動で動画比率を調整して、ブラウザにフィットして表示されます。
(ただし、動画用のiframeに特化していますので、iframeの広告タグは適用外となります。)