Open1

【Shopify】mp4ファイル自動再生

Eiji Saito | UnReact Inc.Eiji Saito | UnReact Inc.

mp4ファイルが自動ループ再生するセクション

<div class="relative overflow-hidden mx-auto video-wrapper" style="max-width:100%; max-height:{{section.settings.movie_max_height}}px;width:{{section.settings.movie_width}}vw; height:{{section.settings.movie_height}}vw;">
  <video class="object-cover absolute h-full w-full" src="{{section.settings.movie_ulr}}" loop autoplay muted></video>
</div>

"settings": [
      {
        "type": "url",
        "id": "movie_ulr",
        "label": "動画URL"
      },
      {
        "type": "range",
        "id": "movie_width",
        "label": "動画幅",
        "unit": "%",
        "min": 0,
        "max": 100,
        "step": 1,
        "default": 64
      },
      {
        "type": "range",
        "id": "movie_height",
        "label": "動画高さ",
        "unit": "%",
        "min": 0,
        "max": 100,
        "step": 1,
        "default": 36
      },
      {
        "type": "range",
        "id": "movie_max_height",
        "label": "動画最大高さ",
        "unit": "px",
        "min": 10,
        "max": 1000,
        "step": 10,
        "default": 500
      }
    ],