video page section

<script
  type="application/json"
  data-section-type="gallery"
  data-section-id="{{ section.id }}"
>
</script>

{%- assign id = section.id -%}

{% comment %} Content settings {% endcomment %}
{%- assign blocks = section.blocks -%}
{%- assign title = section.settings.title | escape -%}
{%- assign sub_title = section.settings.sub_title | escape -%}
{%- assign para = section.settings.paragraph -%}
{% assign svw_base = 'col-12' %}
{% if section.settings.grid-size == 2 %}
  {% assign svw = ' col-md-6' %}
{% elsif section.settings.grid-size == 3 %}
  {% assign svw = ' col-md-4' %}
{% else %}
  {% assign svw = ' col-md-3' %}
{% endif %}
{% comment %} End content settings {% endcomment %}



{% comment %} Section specific CSS {% endcomment %}
{% style %}
  {%
    render 'css-loop',
    css: custom_css,
    id: id
  %}
{% endstyle %}

<section
  class="
    section
    section_ms_yt_videos
    {{ css_class }}
  "
>
  <div
    class="
      {% comment %}container{% endcomment %}
      ms_yt_videos
    "
    id="ms_yt_videos_section-{{ section.id }}"
  >
    {% if title != blank %}
      <div class="one-whole column">
        <p class="title center">{{ title }}</p>
        <div class="feature_divider"></div>
      </div>
    {% endif %}

    {% if sub_title != blank %}
      <div class="one-whole column">
        <p class="sub_title">{{ sub_title }}</p>
        <div class="feature_divider"></div>
      </div>
    {% endif %}

    {% if para != blank %}
      <div class="row">
        <div class="col-md-2 col-12"></div>
        <div class="col-md-10 col-12">
          <div class="one-whole column">
            <p class="para">{{ para }}</p>
            <div class="feature_divider"></div>
          </div>
        </div>
      </div>
    {% endif %}

    {% assign index = 0 %}
    {% if blocks.size > 0 %}
       <div class="row">
          {%- for block in section.blocks -%}
              {% assign index = index | plus:1 %}
              {% assign bs = block.settings %}
              {% assign base_url = "https://www.youtube.com/embed/" %}
              {% assign url = bs.video_url | strip %}
              {% if url contains "youtu.be" %}
                {% assign video_id = url | split: "be/" | last | split: "?" | first %}
              {% elsif url contains "watch?v=" %}
                {% assign video_id = url | split: "v=" | last | split: "&" | first %}
              {% elsif url contains "/embed/" %}
                {% assign video_id = url | split: "/embed/" | last | split: "?" | first %}
              {% else %}
                {% assign video_id = "" %}
              {% endif %}
            
              {% if video_id != "" %}
                <div class="{{ svw_base }}{{ svw }}">
                  <iframe width="560" height="315" src="{{ base_url }}{{ video_id }}" frameborder="0" allowfullscreen></iframe>
                </div>
              {% endif %}
          {% endfor %}
       </div>
    {% endif %}
  </div>
</section>


{% schema %}
{
  "name": "Ms yt video",
  "class": "shopify-section--ms_yt_videos",
  "max_blocks": 24,
  "settings": [
    {
      "type": "checkbox",
      "id": "wide_display",
      "label": "Wide display",
      "default": false
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Video Gallery"
    },
    {
      "type": "text",
      "id": "sub_title",
      "label": "Sub heading",
      "default": "Scopri subito, guardando questi video, come lavora “in azione” la macchina per la pulizia professionale ed industriale adatta per i tuoi scopi."
    },
    {
      "type": "richtext",
      "id": "paragraph",
      "label": "Paragraph",
      "default": "<p>Default paragraph</p>"
    },
    {
      "type": "range",
      "id": "grid-size",
      "label": "Number of columns",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 4
    },
    {
      "type": "header",
      "content": "Advanced"
    },
    {
      "type": "paragraph",
      "content": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
    }
  ],
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "text",
          "id": "video_title",
          "label": "Video title"
        },
        {
          "type": "text",
          "id": "video_url",
          "label": "Video link"
        },
        {
          "type": "text",
          "id": "video_label",
          "label": "Video label"
        },
        {
          "type": "url",
          "id": "video_label_url",
          "label": "Video label url"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Ms yt videos",
      "blocks": [
        {
          "type": "video"
        },
        {
          "type": "video"
        },
        {
          "type": "video"
        }
      ]
    }
  ]
}

{% endschema %}