Add Video Input Setting to Shopify Theme - Dawn v7.0.0 theme

updated-video-input.liquid

{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="video-section isolate{% unless section.settings.full_width %} page-width{% endunless %} section-{{ section.id }}-padding">
    <div{% if section.settings.full_width %} class="page-width"{% endif %}>
      {%- unless section.settings.heading == blank -%}
        <div class="title-wrapper title-wrapper--no-top-margin">
          <h2 class="title {{ section.settings.heading_size }}">{{ section.settings.heading }}</h2>
        </div>
      {%- endunless -%}
    </div>
    {% comment %}
      Customization starts here. This is entirely the Dawn theme using an if else to check for added new input setting
      This leverages the exact same logic from existing section, just switches the source for video and presentation
      Video courtesy of Taylor Page with The Pages Media at https://www.youtube.com/@TRPage_dev/ for implementation
    {% endcomment %}
    {% if section.settings.video != nil %}
        <noscript>
      <div class="video-section__media"
        {% if section.settings.video.preview_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.video.preview_image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        <a href="{{ section.settings.video.sources }}" class="video-section__poster media media--transparent media--landscape{% if section.settings.video.preview_image == blank %} video-section__placeholder{% endif %}">
          {%- if section.settings.cover_image != blank -%}
            {%- capture sizes -%}{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}{%- endcapture -%}
            {%- assign alt = 'sections.video.load_video' | t: description: section.settings.description | escape -%}
            {{ section.settings.video.preview_image | image_url: width: 3840 | image_tag:
              loading: 'lazy',
              sizes: sizes,
              widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840',
              alt: alt
            }}
          {%- else -%}
            {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
          {%- endif -%}
        </a>
      </div>
    </noscript>
    <deferred-media class="video-section__media deferred-media no-js-hidden gradient global-media-settings video-section__updated{% if section.settings.full_width %} global-media-settings--full-width{% endif %}" data-media-id="{{ section.settings.video.id }}"
      {% if section.settings.video.preview_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.video.preview_image.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      <button
        id="Deferred-Poster-Modal-{{ section.settings.video.id }}"
        class="video-section__poster media deferred-media__poster media--landscape"
        type="button"
        aria-label="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
      >
        {%- if section.settings.video.preview_image != blank -%}
          {%- capture sizes -%}{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}{%- endcapture -%}
          {%- assign alt = 'sections.video.load_video' | t: description: section.settings.description | escape -%}
          {{ section.settings.video.preview_image | image_url: width: 3840 | image_tag:
            loading: 'lazy',
            sizes: sizes,
            widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840',
            alt: alt
          }}
        {%- else -%}
          {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
        {%- endif -%}
        <span class="deferred-media__poster-button motion-reduce">
          {%- render 'icon-play' -%}
        </span>
      </button>
      <template>
        {{ section.settings.video | video_tag: autoplay: true, loop: false, muted: false, controls: true }}
      </template>
      <style>
        video {
          max-width: 100%;
        }
        .video-section__media.video-section__updated[loaded="true"]{
          margin-bottom: -{{ 1 | divided_by: section.settings.video.preview_image.aspect_ratio | times: 100 }}%;
        }
      </style>
    </deferred-media>
    {% else %}
    <noscript>
      <div class="video-section__media"
        {% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        <a href="{{ section.settings.video_url }}" class="video-section__poster media media--transparent media--landscape{% if section.settings.cover_image == blank %} video-section__placeholder{% endif %}">
          {%- if section.settings.cover_image != blank -%}
            {%- capture sizes -%}{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}{%- endcapture -%}
            {%- assign alt = 'sections.video.load_video' | t: description: section.settings.description | escape -%}
            {{ section.settings.cover_image | image_url: width: 3840 | image_tag:
              loading: 'lazy',
              sizes: sizes,
              widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840',
              alt: alt
            }}
          {%- else -%}
            {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
          {%- endif -%}
        </a>
      </div>
    </noscript>
    <deferred-media class="video-section__media deferred-media no-js-hidden gradient global-media-settings{% if section.settings.full_width %} global-media-settings--full-width{% endif %}" data-media-id="{{ section.settings.video_url.id }}"
      {% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      <button
        id="Deferred-Poster-Modal-{{ section.settings.video_url.id }}"
        class="video-section__poster media deferred-media__poster media--landscape"
        type="button"
        aria-label="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
      >
        {%- if section.settings.cover_image != blank -%}
          {%- capture sizes -%}{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}{%- endcapture -%}
          {%- assign alt = 'sections.video.load_video' | t: description: section.settings.description | escape -%}
          {{ section.settings.cover_image | image_url: width: 3840 | image_tag:
            loading: 'lazy',
            sizes: sizes,
            widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840',
            alt: alt
          }}
        {%- else -%}
          {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
        {%- endif -%}
        <span class="deferred-media__poster-button motion-reduce">
          {%- render 'icon-play' -%}
        </span>
      </button>
      <template>
        {%- if section.settings.video_url.type == 'youtube' -%}
          <iframe src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
        {%- else -%}
          <iframe src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
        {%- endif -%}
      </template>
    </deferred-media>
      {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.video.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Video",
      "label": "t:sections.video.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "header",
      "content": "New video option"
    },
    {
      "type": "video",
      "id": "video",
      "label": "A Shopify-hosted video"
    },
    {
      "type": "header",
      "content": "Old video option"
    },
    {
      "type": "image_picker",
      "id": "cover_image",
      "label": "t:sections.video.settings.cover_image.label"
    },
    {
      "type": "video_url",
      "id": "video_url",
      "accept": [
        "youtube",
        "vimeo"
      ],
      "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
      "label": "t:sections.video.settings.video_url.label",
      "placeholder": "t:sections.video.settings.video_url.placeholder",
      "info": "t:sections.video.settings.video_url.info"
    },
    {
      "type": "text",
      "id": "description",
      "label": "t:sections.video.settings.description.label",
      "info": "t:sections.video.settings.description.info"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "t:sections.video.settings.full_width.label",
      "default": false
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "t:sections.video.presets.name"
    }
  ]
}
{% endschema %}

This is the version of Dawn 7.0.0 modified to include the new Video Input setting, rather than having to host via Youtube or Vimeo. This also allows you to pick videos directly via the video picker in the customizer, rather than having to host elsewhere or manually upload and then grab a URL.

YouTube video reviewing this: https://youtu.be/7O_tAAbHjLk

Just tested in most recently available, today, 8.0.0 and valid.

Updated for a styling issue with preserving padding space beneath the video (excessive). Quick styling rule for negative margin to compensate until have more time to look at it.