Add video option to Rich text section

Add video option to Rich text section

LindStuart
Excursionist
31 0 6

Hi, wondering if there's an easy way to add a video option to a rich text section. It currently only supports video. I'd also want to be able to make it silent (no audio).

 

I'm using the Local theme by Krown Themes. I've put the code here in case that's helpful for a quick fix. Thanks in advance!

 

 

 

 

{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}

<div class="{% unless section.settings.is_fullwidth %} container--large {% else %} container--fullwidth {% endunless %} {% unless section.settings.remove_margin %} container--vertical-space {% endunless %} {% if section.settings.section_background_color != "rgba(0,0,0,0)" or section.settings.section_background_gradient != blank %} container--has-background {% endif %}">

  <div id="element-{{ section.id }}" class="card 
    {% if section.settings.is_fullwidth %} card--no-radius card--no-sideborders card--no-shadow {% endif %} 
    {% unless section.settings.image_position contains "top" %} 
      element--height-{{ section.settings.height }} 
    {% else %}
      rich-text--image-on-top 
    {% endunless %} 
  rich-text">

    <div class="rich-text__container rich-text__container--image-{{ section.settings.image_position }} {% if section.settings.is_fullwidth %} rich-text__container--fullwidth {% if section.settings.image_position contains 'top' %} container--large {% endif %} {% endif %}">

      {%- unless section.settings.image_position contains "no-image" -%}
        <div class="rich-text__image 
          {% unless section.settings.image_crop %} rich-text__image--fit {% endunless %} 
          {% if section.settings.image_position contains "top" %} element--height-{{ section.settings.height }} {% endif %}" 
        aria-hidden="true">

          {%- liquid
            if section.index == 1
              assign preload = true
            else
              assign preload = false
            endif
          -%}

          {%- liquid
            unless section.settings.image == blank
              render 'lazy-image', image: section.settings.image, type: '', alt: section.settings.title, image_alignment: true, id: section.id, preload: preload
            else
              echo 'image' | placeholder_svg_tag
            endunless
          -%}
        </div>
      {%- endunless -%}

      <div class="rich-text__text align-content align-content--{{ section.settings.text_alignment }} align-content--vertical-middle">
        <div class="card__text 
          {% unless section.settings.is_fullwidth %} gutter--xlarge {% endunless %} 
          {% if section.settings.is_fullwidth and section.settings.image_position contains "top" %} gutter-top--xlarge gutter-bottom--xlarge {% endif %} 
        spacing--large remove-empty-space">

          {%- for block in section.blocks -%}
            {%- case block.type %}

              {%- when 'custom_liquid' -%}
                <div {{ block.shopify_attributes }}>
                  {{ block.settings.custom_liquid }}
                </div>

              {%- when 'title' -%}
                <{{ block.settings.seo_h_tag }} 
                  class="{{ block.settings.title_size }} rte rich-text__title"
                  {{ block.shopify_attributes }}
                >
                  {{ block.settings.title }}
                </{{ block.settings.seo_h_tag }}>

              {%- when 'text' -%}
                <div 
                  class="rte text-size--{{ block.settings.text_size }}"
                  {{ block.shopify_attributes }}
                >
                  {{ block.settings.text }}
                </div>

              {%- when 'button' -%}
                <div 
                  class="increased-spacing" 
                  {{ block.shopify_attributes }}
                >
                  <a href="{{ block.settings.link }}" {% unless block.settings.open_in_new_window == false %} target="_blank" {% endunless %} class="button button--{{ block.settings.button_size }} button--{{ block.settings.button_style }}">
                    {{ block.settings.button_label }}
                  </a>
                </div>

              {%- when 'space' -%}
                <div class="empty-space" {{ block.shopify_attributes }}>&nbsp;</div>

            {%- endcase %}
          {%- endfor -%}

        </div>  

      </div>

      {%- render 'custom-colors', id: section.id, text: section.settings.color_text_main, background: section.settings.color_background_main, accent: section.settings.color_accent_main, borders: section.settings.color_borders_main, shadow: section.settings.color_shadow_main, hide_borders: section.settings.color_hide_borders, hide_shadow: section.settings.color_hide_shadow -%}

    </div>
  </div>
</div>

{%- if section.settings.section_background_color != "rgba(0,0,0,0)" -%}
  {% style %}
    #shopify-section-{{ section.id }} {
      background-color: {{ section.settings.section_background_color }};
    }
  {% endstyle %}
{%- endif -%}
{%- if section.settings.section_background_gradient != blank -%}
  {% style %}
    #shopify-section-{{ section.id }} {
      background: {{ section.settings.section_background_gradient }};
    }
  {% endstyle %}
{%- endif -%}

{% schema %}
{
  "name": "t:sections.rich-text.name",
  "class": "can-be-fullwidth no-fullwidth-padding",
  "max_blocks": 9,
  "settings": [
    {
      "id": "image",
      "type": "image_picker",
      "label": "t:sections.gallery.blocks.image.settings.image.label"
    },
    {
      "type": "select",
      "id": "image_position",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.label",
      "options": [
        {
          "value": "left",
          "label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__1"
        },
        {
          "value": "top",
          "label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__2"
        },
        {
          "value": "right",
          "label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__3"
        },
        {
          "value": "top no-image",
          "label": "t:late_edits.rich-text.image_position.no_image.label",
          "group": "t:late_edits.rich-text.image_position.no_image.group"
        }
      ],
      "default": "right"
    },
    {
      "type": "select",
      "id": "height",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.height.label",
      "info": "t:sections.local-extra-words.sections.rich-text.settings.height.info",
      "options": [
        {
          "value": "small",
          "label": "t:sections.image-with-text.settings.image_height.options__1.label"
        },
        {
          "value": "regular",
          "label": "t:sections.image-with-text.settings.image_height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-with-text.settings.image_height.options__3.label"
        }
      ],
      "default": "regular"
    },
    {
      "type": "checkbox",
      "id": "image_crop",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.crop.label",
      "info": "t:sections.local-extra-words.sections.rich-text.settings.crop.info",
      "default": true
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "t:sections.image-with-text.settings.text_alignment.label",
      "options": [
        {
          "value": "horizontal-left",
          "label": "t:sections.rich-text.settings.text_alignment.options__1.label"
        },
        {
          "value": "horizontal-center",
          "label": "t:sections.rich-text.settings.text_alignment.options__2.label"
        },
        {
          "value": "horizontal-right",
          "label": "t:sections.rich-text.settings.text_alignment.options__3.label"
        }
      ],
      "default": "horizontal-center"
    },
    {
      "type": "header",
      "content": "t:local-march-update.labels.section_design"
    },
    {
      "type": "checkbox",
      "id": "is_fullwidth",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.fullwidth.label",
      "default": false,
      "info": "t:sections.local-extra-words.sections.rich-text.settings.fullwidth.info"
    },
    {
      "type": "color",
      "id": "section_background_color",
      "label": "t:sections.local-extra-words.settings_schema.product-card.badges.custom_badges.color",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color_background",
      "id": "section_background_gradient",
      "label": "t:local-230.background_gradient"
    },
    {
      "type": "checkbox",
      "id": "remove_margin",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.remove_margin.label",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.local-extra-words.sections.headings.custom_colors"
    },
    {
      "type": "color",
      "id": "color_background_main",
      "label": "t:sections.split-extra-words.settings_schema.colors.settings.background",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "color_text_main",
      "label": "t:sections.split-extra-words.settings_schema.colors.settings.text",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "color_accent_main",
      "label": "t:sections.local-extra-words.settings_schema.colors.settings.accent",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "color_borders_main",
      "label": "t:sections.local-extra-words.settings_schema.colors.settings.borders",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "color_shadow_main",
      "label": "t:local-march-update.shadows.label",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "checkbox",
      "id": "color_hide_borders",
      "label": "t:sections.local-extra-words.settings_schema.colors.settings.hide_border",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "color_hide_shadow",
      "label": "t:local-march-update.shadows.hide",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "title",
      "name": "t:sections.rich-text.blocks.heading.name",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "title",
          "label": "t:sections.rich-text.blocks.heading.settings.heading.label",
          "default": "Talk about your brand"
        },
        {
          "type": "select",
          "id": "title_size",
          "label": "t:sections.rich-text.blocks.heading.settings.heading_size.label",
          "options": [
            {
              "value": "h3",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__1.label"
            },
            {
              "value": "h2",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__2.label"
            },
            {
              "value": "h1",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__3.label"
            }
          ],
          "default": "h2"
        },
        {
          "type": "header",
          "content": "t:sections.refactor_words.seo.name"
        },
        {
          "type": "select",
          "id": "seo_h_tag",
          "label": "t:sections.refactor_words.seo.label",
          "info": "t:sections.refactor_words.seo.info",
          "options": [
            {
              "value": "h1",
              "label": "H1"
            },
            {
              "value": "h2",
              "label": "H2"
            },
            {
              "value": "h3",
              "label": "H3"
            },
            {
              "value": "h4",
              "label": "H4"
            },
            {
              "value": "span",
              "label": "span"
            }
          ],
          "default": "h2"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.rich-text.blocks.text.name",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "t:sections.rich-text.blocks.text.settings.text.label",
          "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements or welcome customers to your store.</p>"
        },
        {
          "type": "select",
          "id": "text_size",
          "label": "t:sections.footer.blocks.text.settings.text_size.label",
          "options": [
            {
              "value": "regular",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__1.label"
            },
            {
              "value": "large",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__2.label"
            }
          ],
          "default": "regular"
        }
      ]
    },
    {
      "type": "button",
      "name": "t:sections.rich-text.blocks.button.name",
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "label": "t:sections.rich-text.blocks.button.settings.button_label.label",
          "default": "Show more"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.rich-text.blocks.button.settings.button_link.label"
        },
        {
          "type": "checkbox",
          "id": "open_in_new_window",
          "label": "t:sections.local-extra-words.sections.announcement-bar.blocks.content.settings.target",
          "default": false
        },
        {
          "type": "select",
          "id": "button_size",
          "label": "t:sections.rich-text.blocks.button.settings.button_size.label",
          "options": [
            {
              "value": "regular",
              "label": "t:sections.rich-text.blocks.button.settings.button_size.options__1.label"
            },
            {
              "value": "large",
              "label": "t:sections.rich-text.blocks.button.settings.button_size.options__2.label"
            }
          ],
          "default": "large"
        },
        {
          "id": "button_style",
          "label": "t:sections.local-extra-words.sections.buttons.style.label",
          "type": "select",
          "options": [
            {
              "value": "outline",
              "label": "t:sections.local-extra-words.sections.buttons.style.option__1"
            },
            {
              "value": "solid",
              "label": "t:sections.local-extra-words.sections.buttons.style.option__2"
            }
          ],
          "default": "outline"
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name": "t:sections.refactor_words.custom_code.name",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "t:sections.custom-liquid.settings.custom_liquid.label"
        }
      ]
    },
    {
      "type": "space",
      "name": "t:local-march-update.blocks.space.name"
    }
  ],
  "presets": [
    {
      "name": "t:sections.rich-text.name",
      "blocks": [
        { "type": "title" },
        { "type": "text" },
        { "type": "button" }
      ]
    }
  ]
}
{% endschema %}

 

 

 

Replies 2 (2)

sherpabot
Shopify Partner
37 3 4

Do you need it to be in a rich text section? You can also just add an iframe embed in the custom liquid/html code section on the page. You just need to make the attribute on the video be mute. 

LindStuart
Excursionist
31 0 6

oh, that's a good idea - thank you!