Mp4 videos setup on product page stop playing when variant changed

[Jonathan_Jelkin]

I have some code to add "video with text" sections. This is working great on initial landing on my product page. However when you change a variant setting all the videos freeze and don't start playing again till you refresh the page. Anyone know how to keep them playing even after changing variants? These videos are linked through URL and setup in the product page theme, they are not videos uploaded as part of the product image carousel. 

This is the code i'm using. 

{{ 'component-video-with-text.css' | asset_url | stylesheet_tag }}

<div class="video-with-text {% if section.settings.full_width %}video-with-text--full-width{% else %}page-width{% endif %} color-scheme-{{ section.settings.color_scheme }}">
  <div class="video-with-text__grid color-{{ section.settings.color_scheme }} grid grid--gapless grid--1-col grid--2-col-tablet gradient{% if section.settings.layout == 'text_first' %} video-with-text__grid--reverse{% endif %}">
    <div class="grid__item">
      <div class="video-with-text__media image-with-text__media--{{ section.settings.height }} media">
        <video style="max-width: 100%; height: 100%;" autoplay="autoplay" loop="loop" muted="" webkit-playsinline="" playsinline="">
          <source src="{{ section.settings.video_url }}" type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="grid__item">
      <div class="video-with-text__content video-with-text__content--{{ section.settings.height }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'heading' -%}
              <h2 class="video-with-text__heading h1" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="video-with-text__text rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'button' -%}
              {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Video with text",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "text",
      "id": "video_url",
      "default": "https://cdn.shopify.com/s/files/1/0050/2779/0919/files/1_1_Cutting_fruit_H.mp4?v=1603372350",
      "label": "Video url",
      "info": "Upload your video to Shopify then paste the url here"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt",
      "label": "Video ratio"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "Video first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first",
      "label": "Desktop layout",
      "info": "Video first is the default mobile layout."
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.video-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "Heading"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Description"
        }
      ]
    },
    {
      "type": "button",
      "name": "Button name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label",
          "info": "Leave the label blank to hide the button."
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

.video-with-text {
  margin-top: 5rem;
}

.video-with-text:not(.color-scheme-background-1) {
  margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text {
    margin-bottom: calc(5rem + var(--page-width-margin));
  }
}

.video-with-text .grid {
  margin-left: 0;
  margin-bottom: 0;
}

.video-with-text__grid {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse {
    flex-direction: row-reverse;
  }
}

.video-with-text__media {
  background-color: transparent;
  min-height: 100%;
}

.video-with-text__media--small {
  height: 19.4rem;
}

.video-with-text__media--large {
  height: 40rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--small {
    height: 31.4rem;
  }

  .video-with-text__media--large {
    height: 60rem;
  }
}

.video-with-text__media--placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  position: relative;
  overflow: hidden;
}

.video-with-text__media--placeholder.video-with-text__media--adapt {
  height: 20rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__media--placeholder.video-with-text__media--adapt {
    height: 30rem;
  }
}

.video-with-text__media--placeholder > svg {
  position: absolute;
  left: 50%;
  max-width: 80rem;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  fill: currentColor;
}

.video-with-text__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: center;
  padding: 4rem calc(4rem / var(--font-body-scale)) 5rem;
}

@media screen and (min-width: 750px) {
  .video-with-text__grid--reverse .video-with-text__content {
    margin-left: auto;
  }
}

@media screen and (min-width: 750px) {
  .video-with-text__content {
    padding: 6rem 7rem 7rem;
  }
}

.video-with-text__content > * + * {
  margin-top: 2rem;
}

.video-with-text__content > .video-with-text__text:empty ~ a {
  margin-top: 2rem;
}

.video-with-text__content > :first-child:is(.video-with-text__heading) {
  margin-top: 0;
}

.video-with-text__content :last-child:is(.video-with-text__heading) {
  margin-bottom: 0;
}

.video-with-text__content .button + .video-with-text__text {
  margin-top: 2rem;
}

.video-with-text__content .video-with-text__text + .button {
  margin-top: 3rem;
}

.video-with-text__heading {
  margin-bottom: 0;
}

.video-with-text__text p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.video-with-text__content {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

[Spac-es]

mark as solution if it worked for you 👉Re: Dawn Theme - Video with Text Section - Shopify Community 

[Spac-es]

I just found a solution!! 

After three whole days trying to improve the document: video-with-text.liquid , (where I added new features such as a pause and play button, focused on computers and mobile devices, etc.) here

I managed to prevent videos from stopping or freezing when selecting a product variant.

1º Go to media-gallery.js

2º Find and remove the following code (line 84):

    playActiveMedia(activeItem) {
      window.pauseAllMedia();
      const deferredMedia = activeItem.querySelector('.deferred-media');
      if (deferredMedia) deferredMedia.loadContent(false);
    }

  (I've also posted it in the main discussion of "Dawn Theme - Video With Text Section")

[Spac-es]

If you experience failures when removing this code on the "buy" and "add to cart" buttons, consider keeping the code and removing only the following line:

window.pauseAllMedia();

The updated code: