TCDテーマOOPS!：【IE】ヘッダーコンテンツの動画表示を調整する方法

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; } }