Add portrait 9:16 YoutTube Shorts to Product Page

[shExplorer]

I'm trying to add YouTube Shorts videos to the product page (as media not in the description).

There are several issues for doing this simple thing and I have been able to resolve some of them. 

Here's what I have done:

- Changed the YT URL from https://www.youtube.com/shorts/9xkJtEJbBBM  to  https://www.youtube.com/watch?v=9xkJtEJbBBM
- In Media, I used "Add from URL".

This will work, but on the product page, the video is displayed as landscape (with black bars)

I figured adding the following CSS in the product information (in the theme editor) could help and would correct the video look 9:16 aspect ratio:

.media-type-external_video {
  --ratio: 0.5625 !important;
  --preview-ratio: 0.5625 !important;
}

However, this only works for desktop. On mobile, the video preview looks OK, but when I click on it, instead of playing the video, it opens a model (overlay?)  which doesn't look correct (looks landscape), and clicking on that will eventually play the video. 

Q: How can I get rid of this modal and make the mobile web work just like the desktop version?

Please see the screenshots below (In order):

1. Mobile - Modal (to be removed)

2. Mobile - preview 

3. Desktop - after CSS fix

4. Desktop - before CSS fix

[Zqdo]

Can you share a link to your website so I can see what you're talking about? Thanks.

[shExplorer]

Sure. 

Check this out on mobile:

https://46335d.myshopify.com/products/the-godfather

[Zqdo]

Took a look. I see what you mean. It seems that there is a modal that is being added on the screen with any screen size less than 750 px. 

What you can do is try and hide the modal and allow the video to play on click no matter the screen size.

Did you create this feature to add YouTube shorts yourself, or did it come with the theme?

[shExplorer]

Yes, that’s the goal. 
Adding YouTube videos comes with yge theme but it doesn’t work with YT short URLs by default. To make it work the URL must e  in this format: youtube.com/watch?v=9xkJtEJbBBM

[Zqdo]

What you could do, since you might want to have that modal/cover image feature for a future case and don't want to mess up the settings, is create a new section, where it's just the video with the sizing that you want. Then you can add your description and other information. This link is helpful: https://community.shopify.com/c/technical-q-a/remove-cover-image-from-video/td-p/1718698 

Do you have any experience creating custom sections on Shopify? I can walk you through it if you need me to. 

I can also set this up for you if you need help as well. Let me know.

[shExplorer]

I have seen that link. It’s not what I want to do. 
The new section is good only for videos. What I am using is the default product media section which consists of both image and video and many related settings such as thumbnails, 1 or 2 columns and many other things. 
So, using a new video section doesn’t seem to be an option.
I need to keep everything as is and just get rid of the modal. 

[Zqdo]

@shExplorer, both the product image and video slide are wrapped in a li tag, so something you could try is in your product.liquid page, comment out the <modal-opener> tag with all the code inside, and right under the <div class="product-media-container>, paste in the <div id="player">  code to see if that works.

This should remove the modal and keep the same style as the desktop version.

You might have to do some adjustments with the styles though.

Let me know if this works.

[shExplorer]

Thanks for the suggestions.
I'm using Sense theme, and it doesn't have a `product.liquid `. Instead it has `main-product.liquid `.

If found the following tag and commented it out:

             <modal-opener
                class="product-popup-modal__opener no-js-hidden quick-add-hidden"
                data-modal="#PopupModal-{{ block.id }}"
                {{ block.shopify_attributes }}
              >
                <button
                  id="ProductPopup-{{ block.id }}"
                  class="product-popup-modal__button link"
                  type="button"
                  aria-haspopup="dialog"
                >
                  {{ block.settings.text | default: block.settings.page.title }}
                </button>
              </modal-opener> 

It didn't have any effect, though.

Also, could not find the class "product-media-container" anywhere in that file: 

[Zqdo]

Look for this <li> tag in your code:

<li id="Slide-template--18961998348582__main-33866863345958" class="product__media-item grid__item slider__slide product__media-item--full" data-media-id="template--18961998348582__main-33866863345958">

<div class="product-media-container media-type-external_video media-fit-contain global-media-settings gradient constrain-height" style="--ratio: 1.77; --preview-ratio: 1.3333333333333333;">
  <noscript><span class="product__media-icon motion-reduce quick-add-hidden"><svg
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
  focusable="false"
  class="icon icon-play"
  fill="none"
  viewBox="0 0 10 14"
>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.48177 0.814643C0.81532 0.448245 0 0.930414 0 1.69094V12.2081C0 12.991 0.858787 13.4702 1.52503 13.0592L10.5398 7.49813C11.1918 7.09588 11.1679 6.13985 10.4965 5.77075L1.48177 0.814643Z" fill="currentColor"/>
</svg>
</span>
      <div class="product__media media">
        <img src="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946" alt="" srcset="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=246 246w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=493 493w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=600 600w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=713 713w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=823 823w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=990 990w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1100 1100w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1206 1206w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1346 1346w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1426 1426w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1646 1646w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946 1946w" width="1946" height="1460" loading="lazy" sizes="(min-width: 1200px) 605px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
      </div>
      <a href="https://www.youtube.com/embed/9xkJtEJbBBM?controls=1&enablejsapi=1&modestbranding=1&origin=https%3A%2F%2F46335d.myshopify.com&playsinline=1&rel=0" class="product__media-toggle">
        <span class="visually-hidden">The Godfather opens full screen video in same window.</span>
      </a></noscript>

  <modal-opener class="product__modal-opener product__modal-opener--external_video no-js-hidden" data-modal="#ProductModal-template--18961998348582__main">
    <span class="product__media-icon motion-reduce quick-add-hidden" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-play" fill="none" viewBox="0 0 10 14">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.48177 0.814643C0.81532 0.448245 0 0.930414 0 1.69094V12.2081C0 12.991 0.858787 13.4702 1.52503 13.0592L10.5398 7.49813C11.1918 7.09588 11.1679 6.13985 10.4965 5.77075L1.48177 0.814643Z" fill="currentColor"></path>
</svg>
</span>
    <div class="loading-overlay__spinner hidden">
      <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="4" cx="33" cy="33" r="30"></circle>
      </svg>
    </div>
    <div class="product__media media media--transparent">
      <img src="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946" alt="" srcset="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=246 246w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=493 493w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=600 600w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=713 713w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=823 823w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=990 990w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1100 1100w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1206 1206w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1346 1346w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1426 1426w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1646 1646w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946 1946w" width="1946" height="1460" loading="lazy" sizes="(min-width: 1200px) 605px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
    </div>
    <button class="product__media-toggle quick-add-hidden product__media-zoom-none" type="button" aria-haspopup="dialog" data-media-id="33866863345958">
      <span class="visually-hidden">
        Open media 2 in modal
      </span>
    </button>
  </modal-opener><deferred-media class="deferred-media media media--transparent no-js-hidden" data-media-id="33866863345958"><button id="Deferred-Poster-Modal-33866863345958" class="deferred-media__poster" type="button">
      <span class="deferred-media__poster-button motion-reduce"><span class="visually-hidden">Play video</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-play" fill="none" viewBox="0 0 10 14">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.48177 0.814643C0.81532 0.448245 0 0.930414 0 1.69094V12.2081C0 12.991 0.858787 13.4702 1.52503 13.0592L10.5398 7.49813C11.1918 7.09588 11.1679 6.13985 10.4965 5.77075L1.48177 0.814643Z" fill="currentColor"></path>
</svg>
</span>
      <img src="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946" alt="" srcset="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=246 246w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=493 493w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=600 600w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=713 713w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=823 823w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=990 990w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1100 1100w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1206 1206w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1346 1346w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1426 1426w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1646 1646w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946 1946w" width="1946" height="1460" loading="lazy" sizes="(min-width: 1200px) 605px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
    </button>
    <template><iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" class="js-youtube" loading="lazy" src="https://www.youtube.com/embed/9xkJtEJbBBM?autoplay=1&amp;controls=1&amp;enablejsapi=1&amp;loop=1&amp;modestbranding=1&amp;origin=https%3A%2F%2F46335d.myshopify.com&amp;playlist=9xkJtEJbBBM&amp;playsinline=1&amp;rel=0" title="The Godfather"></iframe></template></deferred-media></div>

          </li>

and replace everything directly inside the <li> portion with

<div class="product-media-container media-type-external_video media-fit-contain global-media-settings gradient constrain-height" style="--ratio: 1.77; --preview-ratio: 1.3333333333333333;">
  <noscript><span class="product__media-icon motion-reduce quick-add-hidden"><svg
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
  focusable="false"
  class="icon icon-play"
  fill="none"
  viewBox="0 0 10 14"
>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.48177 0.814643C0.81532 0.448245 0 0.930414 0 1.69094V12.2081C0 12.991 0.858787 13.4702 1.52503 13.0592L10.5398 7.49813C11.1918 7.09588 11.1679 6.13985 10.4965 5.77075L1.48177 0.814643Z" fill="currentColor"/>
</svg>
</span>
      <div class="product__media media">
        <img src="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946" alt="" srcset="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=246 246w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=493 493w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=600 600w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=713 713w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=823 823w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=990 990w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1100 1100w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1206 1206w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1346 1346w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1426 1426w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1646 1646w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946 1946w" width="1946" height="1460" loading="lazy" sizes="(min-width: 1200px) 605px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
      </div>
      <a href="https://www.youtube.com/embed/9xkJtEJbBBM?controls=1&enablejsapi=1&modestbranding=1&origin=https%3A%2F%2F46335d.myshopify.com&playsinline=1&rel=0" class="product__media-toggle">
        <span class="visually-hidden">The Godfather opens full screen video in same window.</span>
      </a></noscript>

  <modal-opener class="product__modal-opener product__modal-opener--external_video no-js-hidden" data-modal="#ProductModal-template--18961998348582__main">
    <span class="product__media-icon motion-reduce quick-add-hidden" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-play" fill="none" viewBox="0 0 10 14">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.48177 0.814643C0.81532 0.448245 0 0.930414 0 1.69094V12.2081C0 12.991 0.858787 13.4702 1.52503 13.0592L10.5398 7.49813C11.1918 7.09588 11.1679 6.13985 10.4965 5.77075L1.48177 0.814643Z" fill="currentColor"></path>
</svg>
</span>
    <div class="loading-overlay__spinner hidden">
      <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="4" cx="33" cy="33" r="30"></circle>
      </svg>
    </div>
    <div class="product__media media media--transparent">
      <img src="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946" alt="" srcset="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=246 246w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=493 493w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=600 600w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=713 713w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=823 823w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=990 990w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1100 1100w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1206 1206w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1346 1346w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1426 1426w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1646 1646w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946 1946w" width="1946" height="1460" loading="lazy" sizes="(min-width: 1200px) 605px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
    </div>
    <button class="product__media-toggle quick-add-hidden product__media-zoom-none" type="button" aria-haspopup="dialog" data-media-id="33866863345958">
      <span class="visually-hidden">
        Open media 2 in modal
      </span>
    </button>
  </modal-opener><deferred-media class="deferred-media media media--transparent no-js-hidden" data-media-id="33866863345958" loaded="true"><button id="Deferred-Poster-Modal-33866863345958" class="deferred-media__poster" type="button">
      <span class="deferred-media__poster-button motion-reduce"><span class="visually-hidden">Play video</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-play" fill="none" viewBox="0 0 10 14">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.48177 0.814643C0.81532 0.448245 0 0.930414 0 1.69094V12.2081C0 12.991 0.858787 13.4702 1.52503 13.0592L10.5398 7.49813C11.1918 7.09588 11.1679 6.13985 10.4965 5.77075L1.48177 0.814643Z" fill="currentColor"></path>
</svg>
</span>
      <img src="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946" alt="" srcset="//cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=246 246w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=493 493w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=600 600w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=713 713w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=823 823w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=990 990w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1100 1100w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1206 1206w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1346 1346w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1426 1426w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1646 1646w, //cdn.shopify.com/s/files/1/0757/6983/9910/files/preview_images/hqdefault_0c75ae61-15cf-4aa2-8a15-60b2dc609720.jpg?v=1684528369&amp;width=1946 1946w" width="1946" height="1460" loading="lazy" sizes="(min-width: 1200px) 605px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
    </button>
    <template><iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" class="js-youtube" loading="lazy" src="https://www.youtube.com/embed/9xkJtEJbBBM?autoplay=1&amp;controls=1&amp;enablejsapi=1&amp;loop=1&amp;modestbranding=1&amp;origin=https%3A%2F%2F46335d.myshopify.com&amp;playlist=9xkJtEJbBBM&amp;playsinline=1&amp;rel=0" title="The Godfather"></iframe></template><iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" class="js-youtube" loading="lazy" src="https://www.youtube.com/embed/9xkJtEJbBBM?autoplay=1&amp;controls=1&amp;enablejsapi=1&amp;loop=1&amp;modestbranding=1&amp;origin=https%3A%2F%2F46335d.myshopify.com&amp;playlist=9xkJtEJbBBM&amp;playsinline=1&amp;rel=0" title="The Godfather"></iframe></deferred-media></div>

and see if that works.

Of course, this would later have to be replaced with the liquid code.

[shExplorer]

What you have shared is the rendered HTML code.

Where exactly do you want me to make this change?
Which .liquid file? Also, what's the point if it's not in liquid?
e.g. I can change the CSS style on the fly in the browser and make it work but the whole point is to make the change in the theme code (ie. .liquid template files)
Am I missing something here?

[Zqdo]

This would be in the main-product.liquid file.

You're essentially replacing the current mobile video player code with the desktop code.

Also, could you share the CSS code you used to make this work? There may be a way to just paste it in directly and fix this issue if I could see the code you used.

[shExplorer]

As I mentioned before, `main-product.liquid` does not have anything similar to the HTML you posted above. The final html code seems to be generated by all or a combination of the following:

main-product.liquid

product-media-gallery.liquid

product-media.liquid

product-media-modal.liquid

component-deferred-media.css

global.js

media-gallery.js

I have touched almost all of the above and was able to make it look a little better on mobile but still have not figured out where it decides to show the modal and how to replicate desktop-like behavior on mobile.

[Zqdo · Accepted solution]

This might be easier if I could see your full code file. If you like, send me an email at zqdo.tech@gmail.com, and we can go from there. 

[shExplorer]

Thanks @Zqdo, for helping track down and resolve the issue. 

[MRPTerri]

I’m having the same issue. Can you share how you resolved it?