Q.トップページのヘッダーコンテンツの背景に動画を設定している場合、IE11で閲覧すると、ブラウザの幅を縮める際に上下に黒い余白が表示されてしまいます。
A.IEはこの箇所に適用されている「object-fit」プロパティに対応していないため、ウィンドウサイズを動画が包括できず、黒い余白が出てしまいます。下記の方法でカスタマイズしてください。
1. IEでもobject-fitに対応させるJavascriptを読み込ませる
編集するファイル: front-page.php
編集する箇所: 最下部に追記
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script> <script>objectFitImages();</script>
2. カスタムCSSで適用箇所を指定する
管理画面【外観】→【TCDテーマオプション】→【基本設定】→「カスタムCSS」の最下部に下記をコピー&ペーストしてください。
.vegas-video { object-fit: cover; font-family: 'object-fit: cover;'; } @media all and (-ms-high-contrast: none) { video { max-width: none !important; } }
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!