動画埋め込みセクション【最新版 】

公開
動画埋め込みセクション【最新版 】
完成系↑↑

今回の記事では動画埋め込みセクションについて解説します!

動画ファイル用のschema「"type": "video"」を使ってます!

今まで動画の埋め込みセクションを作る際は「"type": "url"」を使って実装していましたが
こちらの記事でもURLを使った実装を紹介しています)

「"type": "video"」の方が「"type": "url"」より動画に適していると思い記事にしました!

動画埋め込みセクションのコード

<div class="page-width schema-list scroll-trigger animate--slide-in">
{{
    section.settings.video
    | video_tag:
        image_size: '1100x',
        loop: true,
        controls: false,
        autoplay: true,
        muted: true,
        width: "560", 
        height: "315"
}}
</div>

{% schema %}
{
    "name": "動画埋め込みセクション",
    "settings": [
        {
            "type": "video",
            "id": "video",
            "label": "ビデオ"
        }
    ],
    "presets":[
        {
            "name" : "動画埋め込みセクション",
            "category": "カスタムパーツ"
        }
    ]
}
{% endschema %}
    

コードの解説

スキーマ("type": "video")の書き方

{
    "type": "video",
    "id": "video",
    "label": "ビデオ"
},

「"type": "video_url"」とは違うの注意してください

videoを選択する

カスタマイズ画面にてファイルのアップロードと選択が可能!

選択したビデオのvideoオブジェクトを取得できます。
もし何も選択されていない場合はnilを返します(動画ファイルじゃない場合も)

フィルター(video_tag)を使って出力

{{
    section.settings.video
    | video_tag:
        image_size: '1100x',
        loop: true,
        controls: false,
        autoplay: true,
        muted: true,
        width: '560', 
        height: '315',
        class: 'custom-class'
}}
指定された動画をvideo_tagフィルターを使って HTML<video>タグを生成しています
  • image_size: ポスター画像のサイズを指定します。指定しない場合、デフォルトで100x100になります。
  • loop: 動画をループ再生するための属性です。ループ再生したい場合に loop 属性を追加します。
  • controls: メディアプレーヤーのコントロール(再生・一時停止・音量調整など)を表示するかどうかを指定します。
  • autoplay: ページが読み込まれたら自動的に動画を再生するための属性です。
  • muted: 動画の音声をミュートにするための属性です。
  • width: 動画の横幅を指定します(ピクセル単位)。
  • height: 動画の高さを指定します(ピクセル単位)。
生成されたコード↓↓
<video> 
    playsinline="playsinline" 
    loop="loop" 
    autoplay="autoplay" 
    muted="muted" 
    width="560" 
    height="315" 
    preload="metadata" 
    poster="//〇〇.myshopify.com/cdn/shop/files/preview_images/〇〇.thumbnail.0000000000_1100x.jpg?v=1678116246">
    <source 
    src="https://cdn.shopify.com/videos/c/vp/〇〇/〇〇.HD-1080p-7.2Mbps-12872856.mp4" 
    type="video/mp4">
    <img src="//〇〇.myshopify.com/cdn/shop/files/preview_images/〇〇.thumbnail.0000000000_1100x.jpg?v=1678116246">
</video>
ポスター画像を同時に出力してくれるので非常に便利です!

動画のURLを取得したい

{{section.settings.video.sources[1].url}}

ビデオのvideo_sourceオブジェクトにアクセスしてあげるとurlが取得できます!

<video src="{{section.settings.video.sources[1].url}}" loop muted playsinline autoplay> </video>  

動画のURLさえわかれば上記コードでも動画を出力できます

各種参考サイトリンク

videoスキーマ
videoオブジェクト
video_tagフィルター

まとめ

urlを使った出力

①ビデオをコンテンツにアップロード
②URLをコピー
③テーマカスタマイズにてURLを貼り付け

videoを使った出力

①カスタマイズでビデオをアップロードして選択

どうでしょう?
videoスキーマを使うとURLを使って表示させるより手順も省けておすすめです!!
運用側からしたら少しでも手間が省けた方がいいですよね!

ビデオの出力方法さえわかればあとはcssで装飾していくだけですので
使う際はこの記事を参考にしていただけると嬉しいです!

블로그로 돌아가기