「Vertical Swipe LP」に動画を表示するカスタマイズ

今回は、WordPress用プラグイン「Vertical Swipe LP」への問い合わせで多かった「動画の表示」について解説していきます。

手順としては以下の通りです。

ツール

【スマホ時代のLP革命】縦スワイプで魅せるWordPressプラグイン『Vertical Swipe LP』

縦型のスワイプLPが流行ってるらしいけど、WordPressでサクっと使えたりしないかな？ こういった方のために、WordPress向けプラグイン『Vertical Swipe LP』を作りました。 プログラミング知識不要で、今流行りの縦型スワイプLPが完成します。 上記のような感じでLP用の画像を...

1.動画をアップロードする

WordPressの管理画面、またはSFTPなどで動画をアップロードしておきましょう。

※WordPressの管理画面から字幕ファイルをアップロードするにはサーバーとWordPressの設定を変更する必要があります。

2.「Vertical Swipe LP」の管理画面で各スライドを作成

「Vertical Swipe LP」は画像をアップロードすることでスライドを作成します。

動画を表示するページにも画像をアップロードしてください。

HTMLコード方式でHTMLをコピーし、固定ページに貼り付ける

CSSとHTMLを書き換える

<div class="vertical-slide">～</div">となっている部分に以下のような

動画を表示するタグを挿入すればOK

<div class="vertical-slide">
<video autoplay muted loop class="background-video" style="width:100%;">
      <source src="https://uchilove.com/wp-content/uploads/2025/07/test.mp4" type="video/mp4">
<track kind="captions" src="https://uchilove.com/wp-content/uploads/2025/07/test.srt" kind="subtitles" style="bottom:20%;" srclang="ja" label="日本語字幕" default ></track>
      お使いのブラウザは動画をサポートしていません。
</video>
                                <div class="slide-content"></div>
           </div>

といった感じになります