記事内に広告有

WordPressでショート動画を縦長表示する方法

iMac

前の記事「Mac “Final Cut Pro 11” のお勉強:YouTubeショート用動画の作成」でこのブログにYouTubeショート用に作成した動画を貼り付けました。しかし、意に反して縦長ではなく横長で貼り付けられました。今回、縦長のショート動画をちゃんと縦長で貼り付けて表示する方法が判ったので忘れないようにメモしておきます。

  • Macで機械音声ナレーションを作製する方法(意に反して横長表示になった↓

WordPressでショート動画を縦長表示する方法

『縦長のショート動画を横長ではなくそのまま縦長でWordpresに貼り付けたい!!』ということで、良い方法がないか調べました。このブログはWordpressの「Cocoon」というテーマを使用しています。テーマ公式サイトにある「Cocoonフォーラム」に「[解決済] youtubeショートの縦長動画を縦長のまま表示したい。」とういう投稿がありました。

解決策(上記の投稿記事より引用)

●前提条件
ショートムービーの縦横比=9:16(横向き)とする。

●埋め込みコード
以下のように埋め込みコードを囲む。

埋め込みコード

●CSS

.youtube iframe {
position: relative;
aspect-ratio:9 /16; /* ビデオの横/縦比 */
}

.youtube .video {
height: 100%;
margin: 0 auto;
overflow: visible;
padding-bottom: 0;
width: 300px; /* ビデオ横幅 */
}

上記の解決策を実施したら、Wordpressでショート動画を縦長表示することができました。

  • Macで機械音声ナレーションを作製する方法(ちゃんと縦長表示にすることが出来た↓

でも、ショート動画を横長で表示するか縦長で表示するかは好みの問題かも…

コメント

タイトルとURLをコピーしました