動画の幅と高さの指定がされている場合、スマートフォン時に動画の見切れが発生します 。
その場合、ソースコードの追加が必要となります。コードを記述しますとスマートフォン時も100%の表示となります。
ソースコードの追加
下記ソースコードの追加をしてください。
<div class="youtube">埋め込みコード</div>
記述例
CSSの調整について
追加CSSコード
ソースコードの追加をしても表示が崩れる場合は、下記CSSを「ページ設定を変更する」の「その他の<head>領域」内に記載してください。
<style>
@media only screen and (max-width: 690px) {
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
}
</style>
追加方法
編集画面上左上メニュー＞ページ＞ページ一覧（ツリー形式）に入ります。
変更したいページの、ページ名右側何も書いていない部分をクリックしフローディングメニューを開きます。フローディングメニュー内上部の左から3つ目の歯車のマークをクリックして下さい。
▼GIF画像です。動きます。
もしくは編集を行いたいページの編集画面に遷移し、画面右上その他＞ページ設定より確認が出来ます。
「ページ設定を変更する」＞「個別設定」＞「その他の<head>領域」内にコピーしたCSSコードを追加します。
※何も記載のない状態のままスクリプトのみを貼り付けると、設定されているCSS情報が表示されず表示が崩れてしまいます。
管理画面左上メニュー＞設定＞サイト内共通設定内の「<head>内編集領域 」を全てコピーし、「その他の<head>領域」に貼り付けてください。
※すでに個別設定されている場合（その他の<head>領域に何かしら記載がある場合）
記載がある場合は、現在設定のある情報の最下部に追記してスクリプトを設定してください。