MP4 Video Doesn’t Play on Instagram iOS Browser

Store Design
, , ,
1

I’m running into a strange issue with a video on my Shopify site — it works great everywhere: on desktop, Android, and even directly in Safari or Chrome on iPhone. But when someone opens the site from the Instagram app on iPhone, the video just doesn’t play. It shows up frozen.

I tried lowering the quality to 1080p, but that didn’t help.

Any idea what might be causing this? Would love to find a solution.

Thanks a lot,

Ido

2

Most of the merchants facing this issue and I would like to gave you solution code. I gave 2 of my client the same solution. Here is the code. Please check it in your Store. And then open the same link in your Instagramin app Browser.

And hope you will see your video will play in app Browser.

{% style %}  
.video-wrapper {  
  position: relative;  
  overflow: hidden;  
  width: 100%;  
}  
.video-wrapper video {
    width: 70%;
    height: 100vh;
    display: block;
    object-fit: cover;
  background: #000;
}  
video::-webkit-media-controls {  
  display: none !important;  
}  
.main-wrapper {
    position: relative;
    background: #000;
}
.content_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    padding: 0 60px;
    flex-direction: column;
    justify-content: center;
    max-width: 800px;
    margin-left: auto;
    text-align: center;
}
h3.content_wrapper_sub_heading {
    color: #564e44;
    font-size: 24px;
    font-weight: 400 !important;
    margin: 0;
    font-family: 'Rajdhani';
}
h2.content_wrapper_heading {
    font-size: 46px;
    color: #fff;
    margin: 25px 0 0;
}
  .heading_content {
    margin-bottom: 30px;
}
.button_block a {
    background: #A0825F;
    font-size: 18px !important;
    color: #fff;
    padding: 10px 10px;
    text-transform: uppercase;
    display: block;
    max-width: 100px;
    margin: auto;
  transition:all 0.2s ease;
}
  .button_block a:hover {
    background: #232323;
     transform: translateY(-8px);
}
  @media (max-width:600px){
    .video-wrapper video {
    width: 100%;
    height: 95vh;
    padding-top: 100px;
  }
    h2.content_wrapper_heading {
    font-size: 24px;
    padding: 15px 0 0;
    margin: 0;
  }
  .content_wrapper {
    height: 70%;
    padding: 0 20px;
    justify-content: space-between;
    margin: auto;
    margin-top: 155px;
  }
    .button_block a {
    font-size: 12px !important;
  }
}
{% endstyle %}  

  
  
    {% if section.settings.shopify_video != blank %}  
      {{  
        section.settings.shopify_video  
        | video_tag: image_size: '1100x', autoplay: true, loop: true, controls: false, muted: true, playsinline: true, preload: 'auto'  
      }}  
    {% endif %}  
  
  
  
    

      ### {{ section.settings.subheading }}
      ## {{ section.settings.heading }}
    

    {{ section.settings.button-label }}

  

  
{% schema %}  
{  
  "name": "Custom Video",  
  "settings": [  
    {  
      "type": "video",  
      "id": "shopify_video",  
      "label": "Upload Shopify Hosted Video",  
      "info": "Shopify hosted video will take priority."  
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Sub Heading",
      "default":"Mor Nov Jewelry"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default":"CRAFTED TO STAND APART"
    },
    {
      "type": "text",
      "id": "button-label",
      "label": "Button Label",
      "default":"Shop"
    },
    {
      "type": "url",
      "id": "button-link",
      "label": "Button URL"
    }
  ],  
  "presets": [  
    {  
      "name": "Custom Video"  
    }  
  ]  
}  
{% endschema %}

Thanks me later :blush:

3

Most of the merchants facing this issue and I would like to gave you solution code. I gave 2 of my client the same solution. Here is the code. Please check it in your Store. And then open the same link in your Instagram

{% style %}  
.video-wrapper {  
  position: relative;  
  overflow: hidden;  
  width: 100%;  
}  
.video-wrapper video {
    width: 70%;
    height: 100vh;
    display: block;
    object-fit: cover;
  background: #000;
}  
video::-webkit-media-controls {  
  display: none !important;  
}  
.main-wrapper {
    position: relative;
    background: #000;
}
.content_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    padding: 0 60px;
    flex-direction: column;
    justify-content: center;
    max-width: 800px;
    margin-left: auto;
    text-align: center;
}
h3.content_wrapper_sub_heading {
    color: #564e44;
    font-size: 24px;
    font-weight: 400 !important;
    margin: 0;
    font-family: 'Rajdhani';
}
h2.content_wrapper_heading {
    font-size: 46px;
    color: #fff;
    margin: 25px 0 0;
}
  .heading_content {
    margin-bottom: 30px;
}
.button_block a {
    background: #A0825F;
    font-size: 18px !important;
    color: #fff;
    padding: 10px 10px;
    text-transform: uppercase;
    display: block;
    max-width: 100px;
    margin: auto;
  transition:all 0.2s ease;
}
  .button_block a:hover {
    background: #232323;
     transform: translateY(-8px);
}
  @media (max-width:600px){
    .video-wrapper video {
    width: 100%;
    height: 95vh;
    padding-top: 100px;
  }
    h2.content_wrapper_heading {
    font-size: 24px;
    padding: 15px 0 0;
    margin: 0;
  }
  .content_wrapper {
    height: 70%;
    padding: 0 20px;
    justify-content: space-between;
    margin: auto;
    margin-top: 155px;
  }
    .button_block a {
    font-size: 12px !important;
  }
}
{% endstyle %}  

  
  
    {% if section.settings.shopify_video != blank %}  
      {{  
        section.settings.shopify_video  
        | video_tag: image_size: '1100x', autoplay: true, loop: true, controls: false, muted: true, playsinline: true, preload: 'auto'  
      }}  
    {% endif %}  
  
  
  
    

      ### {{ section.settings.subheading }}
      ## {{ section.settings.heading }}
    

    {{ section.settings.button-label }}

  

  
{% schema %}  
{  
  "name": "Custom Video",  
  "settings": [  
    {  
      "type": "video",  
      "id": "shopify_video",  
      "label": "Upload Shopify Hosted Video",  
      "info": "Shopify hosted video will take priority."  
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Sub Heading",
      "default":"Mor Nov Jewelry"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default":"CRAFTED TO STAND APART"
    },
    {
      "type": "text",
      "id": "button-label",
      "label": "Button Label",
      "default":"Shop"
    },
    {
      "type": "url",
      "id": "button-link",
      "label": "Button URL"
    }
  ],  
  "presets": [  
    {  
      "name": "Custom Video"  
    }  
  ]  
}  
{% endschema %}

in app Browser.

And hope you will see your video will play in app Browser.

Thanks me later :blush: .

4

Hey thank you for your attention!
but I never end coding before. Which part of the video code I should copy that and paste?

5

Replace your video tag with this one.

{{  
        section.settings.shopify_video  
        | video_tag: image_size: '1100x', autoplay: true, loop: true, controls: false, muted: true, playsinline: true, preload: 'auto'  
      }}

And make sure you use this JS you can replace with your one.

And you have to replace the name of classes.

6

Hello I tried it exactly how you tell me. But the website stop running at all.
what should I do??

7

Instagram uses a WebView (a lightweight browser) within its app to display external websites, which has strict limitations. First, ensure your video is properly encoded and compatible with the Instagram app. To check this, take the full URL of the video (MP4 file) from your store and try opening it within the Instagram app. If it works, the issue may be resolved by modifying your site’s code. If not (which I suspect is the case), re-encode the video using a tool like HandBrake.