Youtubeは横長の9:16のアスペクト比ですが、動画によっては縦長だったり正方形に近いものであったりします。iPhone等のスマホでは縦長に対応できるようになりましたが、ブラウザー上ではそのままでは横長で左右に黒幕ができたりした表示になります。
WordPressで設定を幾つか修正すると、画面一杯に拡大しない状態では縦長で再生することが可能です。
縦長動画
YoutoubeでWordPressに埋め込むためのコードを取得します。
たとえ縦長動画をアップしても、左右に黒空白が作られて横長の9:16アスペクト比の動画に修正されてこのような形式で出てきます。
1 2 |
<iframe width="560" height="315" src="//www.youtube.com/embed/xXxx-xX XxX?rel=0" allowfullscreen="allowfullscreen"></iframe> |
ここでiframeの縦横を入れ替えて縦長にします。
1 2 |
<iframe width="315" height="560" src="//www.youtube.com/embed/xXxx-xX XxX?rel=0" allowfullscreen="allowfullscreen"></iframe> |
WordPressでは「ビジュアル」では縦長動画になっているのですが、実際のページでは画面の縦長に左右の黒空白追加された横長動画となってしまいます。
ここで</iframe>の前に改行を意図的に入れると
1 2 3 4 |
<iframe width="315" height="560" class="portrait16-9" src="//www.youtube.com/embed/xXxx-xX XxX?rel=0&showinfo=0" frameborder="0" allowfullscreen="allowfullscreen"> </iframe> |
これで実際のページ表示では縦長で再生されます。
ページのソースを表示すると
1 2 3 |
<iframe width="315" height="560" align="cneter" src="https://www.youtube.com/embed/xXxx-xX XxX?rel=0" frameborder="0" allowfullscreen="allowfullscreen"><br /> </iframe></div> <iframe width="315" height="560" align="cneter" src="https://www.youtube.com/embed/xXxx-xX XxX?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div> |
<br />が入っているのが分かります。
ただ全画面にすると左右の黒空白が追加されてしまいます。