Fix Mobile Video Playback Issues in Shopify Narrative Theme

Are you struggling to get your video to play on mobile devices using Shopify’s Narrative theme? You’re not alone. Many store owners face this challenge, but there are solutions available. In this comprehensive guide, we’ll explore why this issue occurs and provide step-by-step instructions to resolve it.

Understanding the Problem

Why Videos Don’t Play on Mobile

The Narrative theme is designed to hide videos on mobile devices by default. This is intentional, not a bug. The theme’s code includes a rule that only supports video playback above a certain screen width threshold, typically around 749 pixels. This means that while tablets might display the video, most smartphones in portrait mode will not.

The Impact on User Experience

Having your video hidden on mobile devices can significantly impact your store’s user experience. With mobile traffic accounting for a large portion of e-commerce visits, it’s crucial to ensure your content is accessible across all devices.

The Most Likely Solution

Modifying the Theme Code

The most effective solution involves modifying the theme’s code. This requires editing three files: theme.scss.liquid, theme.js, and theme.liquid. Here’s a step-by-step guide:

1. Edit theme.scss.liquid

Find the media query for slideshow__video iframe and comment it out or delete it. The relevant section should look like this:

.slideshow__video, .slideshow__video iframe {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101%;
  visibility: hidden;
  transition: $transition-slideshow;
  pointer-events: none;
  .slideshow--adapt & {
    min-height: 56.25vw;
  }
  /* @include media-query($small) {
    display: none;
  } */
}

2. Modify theme.js

In the theme.js file, you’ll need to add code to initialize and play the video on mobile devices. Locate the “Slideshow Mobile Extension” section (around line 7705) and replace it with the provided code snippet. This new code includes functions to load and play videos for both YouTube and Vimeo.

3. Update theme.liquid

In the theme.liquid file, find the line that loads the JavaScript file (around line 90) and change it from theme.min.js to theme.js:

<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

Additional Considerations

After making these changes, you might notice that the play/pause button always shows on desktop. To fix this, add display: none; to the slideshow__play-button class in the theme.scss.liquid file:

.slideshow__play-button {
  display: none;
  opacity: 0;
  position: relative;
  margin: 0 auto;
  height: 50px;
  width: 50px;
  padding: 0;
  transition: transform 0.5s ease;
}

Alternative Solutions

Using Vimeo Instead of YouTube

Some users have reported success by switching from YouTube to Vimeo for their video hosting. While this doesn’t work for everyone, it’s worth trying if you’re still experiencing issues after modifying the theme code.

Embedding Video in Product Descriptions

For product pages, you can try embedding the video directly in the product description. Use the following code in the “Description” > “Show HTML” section:

For Vimeo:

<iframe src="YOUR_VIDEO_LINK_HERE?autoplay=1&loop=1&muted=1" width="640" height="338" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

For YouTube:

<iframe title="YouTube video player" src="YOUR_YOUTUBE_LINK_HERE?controls=0&autoplay=1&mute=1&loop=1&playsinline=1" height="315" width="560" allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" frameborder="0"></iframe>

Troubleshooting Common Issues

Video Not Autoplaying on iOS

If you’re still experiencing issues with autoplay on iOS devices, ensure that you’ve set both autoplay and playsinline attributes in the video URL. This is crucial for getting videos to play automatically on Apple devices.

Video Reloading When Switching Between Desktop and Mobile Views

You may notice that the video reloads when switching between desktop and mobile views around the 749px breakpoint. This is expected behavior due to the theme’s responsive design and shouldn’t affect most users in real-world scenarios.

Best Practices for Mobile Video

Optimize Video for Mobile

To ensure smooth playback on mobile devices:

• Compress your videos to reduce file size
• Use appropriate video dimensions for mobile screens
• Consider creating shorter versions of your videos for mobile users

Test Across Multiple Devices

Always test your video playback on various devices and browsers to ensure consistent performance. Pay special attention to different iOS and Android versions, as well as popular mobile browsers like Chrome, Safari, and Firefox.

By following these steps and best practices, you should be able to get your videos playing smoothly on mobile devices in Shopify’s Narrative theme. Remember to always back up your theme files before making any changes, and don’t hesitate to reach out to Shopify support if you encounter any difficulties during the process.