Solved

Narrative Theme - Video is not playing in mobile mode

GDLT
Tourist
9 0 0

Hi,

 

We're using narrative theme and put video in the video slide section. It work on desktop mode but not working on the mobile mode.

Would appreciate any input on this.

TIA

Accepted Solution (1)
Visely-Team
Shopify Partner
1843 210 488

This is an accepted solution.

Your store is password protected. Can you share a preview URL?

 

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog

View solution in original post

Replies 59 (59)

Visely-Team
Shopify Partner
1843 210 488

What's your store URL?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
GDLT
Tourist
9 0 0
Visely-Team
Shopify Partner
1843 210 488

This is an accepted solution.

Your store is password protected. Can you share a preview URL?

 

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
GDLT
Tourist
9 0 0

Hi, I've found the problem. It was due the link to youtube. Im using vimeo instead and it worked.  Thank you.,

SKiPA
Visitor
1 0 0

Hi there, I’m having the same problem and tried using Vimeo instead. This didn’t solve it for me. I have a feeling it isn’t possible to have looping auto play video on mobile with the narrative theme. Is that right? Or is there some code I can use to make it work?

Thanks in advance

rfi-apparel
New Member
4 0 0

Did you find a fix for auto-play and looping for the video in the narrative theme? I'm trying to get my product videos to auto-play + loop but haven't found a result.

paragonyc
Visitor
2 0 0

i have the same problem,

can someone please help me with that ??

hellquake
Tourist
7 0 8

I posted exact steps and code of how to get a movie working on mobile. I made it as straight forward as I could to fix the issue. You can find the solution here: Solved: Re: Narrative Theme - Video is not playing in mobile mode - Page 4 - Shopify Community

amelia-nzd
Visitor
2 0 0

Hi there,

I used the supplied code/instructions you provided. It fixed the issue on android but the video still is not playing on ios. Do you know why this may be?

Thanks!

hellquake
Tourist
7 0 8

Hmmm that is super interesting that iOS is still not playing the video. I can try and take a look this weekend to see if I can figure out why. Can you tell me what iOS device and browser you tested on so I can see if I can replicate?

 

Thanks

amelia-nzd
Visitor
2 0 0

That would be amazing thank you! We tested multiple iOS devices in BrowserStack in chrome, and also tested my personal device an XS max in safari and had no luck with either. The android devices work well in BrowserStack though.

Cheers

hellquake
Tourist
7 0 8

I took a look to see if I could reproduce the issue and figure out why iOS isn't working and I honestly have no idea. I tried multiple iOS devices on BrowserStack and I have a test device that is an XS max on OS 13.9 and the video played for me in all these places. I then sent it to my friend who has an iPhone 12 on OS 14 and the video did not work. We then tried her partner's iPhone and the video worked just fine. 

My best guess is its either a network issues, a device issue or possibly something with how the video is actually being loaded due to the network or device. I did find this information from apple about how to properly deliver video on safari: Delivering Video Content for Safari | Apple Developer Documentation

Since this theme is designed and supported by Shopify, maybe there is a chance they could help directly? However since this question has been around for quite awhile I wouldn't hold my breath. Out of my own curiosity I might try to figure it out a different day. 

Sorry I don't have a solution for you!

rfi-apparel
New Member
4 0 0

Ever since I added the line of code into the HTML script, on iPhone when a product is selected “small, medium, large, etc” the video will pop up and autoplay, this is only happening on my iPhone. Doesn’t happen on my desktop, haven’t tested on android. Any idea why this is happening or how to prevent?

hellquake
Tourist
7 0 8

I figured it out and was able to confirm this fix with my friend who also had the issues with the video not autoplaying on her iphone. We need to set the autoplay and the playsinline on the generated url. Below is the code fix for youtube and vimeo videos. 

My line number starts at 8032 in the theme.js file and ends at 8112:

 

  //Added _loadYoutubePlayer method
  _loadYoutubePlayer: function() {
    var blockId = this.$video.attr('data-block-id');
    var videoId = this.$video.attr('data-video-id');

    return youtube
      .promisePlayer(this.$video[0], {
        videoId: videoId,
        ratio: 16 / 9,
        playerVars: {
          // eslint-disable-next-line camelcase
          iv_load_policy: 3,
          modestbranding: 1,
          autoplay: 1, //make sure it autoplays
          playsinline: 1, //forbid fullscreen on ios
          mute: 1,
          controls: 0,
          showinfo: 0,
          wmode: 'opaque',
          branding: 0,
          autohide: 0,
          rel: 0
        },
        events: {
          onStateChange: function(evt) {
            // Video has ended, loop back to beginning
            if (evt.data === 0) {
              this.players[blockId].seekTo(0);
            }
          }.bind(this)
        }
      })
      .then(
        function(player) {
          this.players[blockId] = player;
          player.playVideo().mute();
          // The video will not play if the iframe is set to visibility: hidden
          // Need to set it seperately from other styles in order to resolve the promise
          $(player.a).css('visibility', 'visible');
          // set player to visible
          return $.Deferred(function(defer) {
            player.addEventListener('onStateChange', function(evt) {
              // Only resolve the promise if the video is playing
              if (evt.data === 1) {
                defer.resolve();
              }
            });
          });
        }.bind(this)
      );
  },

  //Added _loadVimeoPlayer method
  _loadVimeoPlayer: function() {
    var blockId = this.$video.attr('data-block-id');
    var videoId = this.$video.attr('data-video-id');

    return vimeo
      .promisePlayer(this.$video[0], {
        id: videoId,
      	autoplay: true, //make sure it autoplays
        loop: true,
      	autopause: false,
      	muted: true, //make sure its muted
        playsinline: true, //forbid fullscreen on ios
        // This property isn't reliable. The user might see the Vimeo playbar flash
        // as the video begins to play.
        playbar: false,
        background: true
      })
      .then(
        function(player) {
          this.players[blockId] = player;
          player.setVolume(0);
          player.play();

          return $.Deferred(function(defer) {
            player.on('loaded', function() {
              defer.resolve();
            });
          });
        }.bind(this)
      );
  },

 

 

hellquake
Tourist
7 0 8

Anyone looking for the full fix for home page slideshow videos to play on mobile AND the last fix to make sure that the video autoplays on ios devices here is the full code fix:

The solution does require code changes in 3 files. 

Couple of notes before making these changes:

  1.  Duplicate or make a copy and save the files you are changing so you always have the original.
  2.  If you change the screen size from desktop to mobile or visa versa you will notice around the 749px mark it reloads the video. This is do to it hitting the mobile size and where it normally would stop showing the video. I don't think most people will run into this, but wanted to make sure you all knew this in advance. 
  3. In the theme.js file where a lot of the work is done. I added the entire section that I changed some of the code in, that way you could copy and paste the whole section of code. I also tried to add comments to the places where I added the video code so you would know what I added.

Code Changes

In the theme.scss.liquid file comment out or delete the media query for the 'slideshow__video iframe'

 

.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;
  } 
 */

 

 

Next move to the theme.js file. This is where the heavy lifting is. What is happening is on mobile it is not initializing the call to load and play the video, so we need to add the code for that. All I did was grab the code that is loading and playing the video from the "Slideshow Desktop Extension" starting on line number 7173 and put it in the "Mobile Desktop Extension" starting on line number 7705. Below is the entire code block of the "Slideshow Mobile Extension" so you can copy this and completely replace that area. 

Start on line number 7705 and go to 8048 and replace all of that with the below:

 

/*

Slideshow Mobile Extension
--------------------------------------------------------------------------------
Manages all the mobile behaviour of the home page slideshow


Events
------------

Name: slideshow_mobile_init_start
Description: Fired before the mobile slideshow begins to initialize
Payload: none

Name: slideshow_mobile_init_done
Description: Fired when the mobile slideshow is done initializing
Payload: none

Name: slideshow_mobile_destroy
Description: Fired when the mobile slideshow is destroyed
Payload: none

Name: slideshow_set_slide
Description: Fired when the user selects a specific slide
Payload: { number } Index of the slide being displayed

Name: slideshow_previous_slide
Description: Fired when the user selects the previous slide
Payload: { number } Index of the slide being displayed

Name: slideshow_next_slide
Description: Fired when the user selects the next slide
Payload: { number } Index of the slide being displayed

---Added the below for informational purposes---
Name: slideshow_video_load
Description: Fired when a video is being loaded in the slideshow
Payload: { object } Video player DOM object

Name: slideshow_video_loaded
Description: Fired when the video is done loading in the slideshow
Payload: { object } Video player DOM object
*/

var selectors$28 = {
  button: '.slideshow__button',
  buttons: '.slideshow__buttons',
  ctaMultipleSlides: '.slideshow__button-cta--multiple',
  ctaSingleSlide: '.slideshow__button-cta-single',
  label: '.slideshow__button-label',
  mobileTextContainer: '.slideshow__text-container-mobile',
  mobileTextContent: '.slideshow__text-content-mobile',
  navigationButtons: '[data-slider-navigation]',
  nextButton: '[data-slider-navigation-next]',
  previousButton: '[data-slider-navigation-previous]',
  slide: '.slideshow__slide',
  slideshow: '.slideshow',
  indicatorDots: '.slideshow__indicator',
  //Added video variable
  video: '.slideshow__video'
};

var classes$25 = {
  buttonActive: 'slideshow__button--active',
  dotActive: 'slideshow__indicator--active',
  linkActive: 'slideshow__button--link',
  slideActive: 'slideshow__slide--active',
  slideActiveTransitioning: 'slideshow__slide--transitioning',
  navigationNoFocus: 'slideshow__navigation-item--no-focus',
  //Added video classes
  videoLoaded: 'slideshow__video--loaded',
  videoPaused: 'slideshow__video--paused'
};

var slideshowMobile = {
  initMobileSlideshow: function() {
    this.trigger('slideshow_mobile_init_start');

    this.$slideshow = $(selectors$28.slideshow, this.$container);
    //Added slide for videos
    this.$slide = $(selectors$28.slide, this.$container);
    this.$buttons = $(selectors$28.buttons, this.$container);
    this.$button = $(selectors$28.button, this.$container);
    this.$navigationButtons = $(selectors$28.navigationButtons, this.$container);
    this.$ctaMultipleSlides = $(selectors$28.ctaMultipleSlides, this.$container);
    this.$ctaSingleSlide = $(selectors$28.ctaSingleSlide, this.$container);
    this.$indicatorDots = $(selectors$28.indicatorDots, this.$container);
    this.$mobileTextContainer = $(
      selectors$28.mobileTextContainer,
      this.$container
    );
    this.$mobileTextContent = $(selectors$28.mobileTextContent, this.$container);

    this.mobileSlideshow = true;
    this.currentMobileSlide = 0;
    this.totalSlides = this.$buttons.data('count');
    //Added players for videos
    this.players = [];
    this.xPosition = 0;
    this.mobileSlideshowNamespace = '.mobileSlideshow';

    // The header is above the slideshow in the iOS editor, so we need to
    // reduce it's height by the height of the header.
    if ($('html').hasClass('is-ios') && Shopify.designMode) {
      this.$slideshow.css('height', '-=60px');
    }

    this.on(
      'click keyup' + this.mobileSlideshowNamespace,
      selectors$28.indicatorDots,
      this._onClickIndicatorDot.bind(this)
    );
    this.on(
      'click keyup' + this.mobileSlideshowNamespace,
      selectors$28.previousButton,
      this._previousSlideMobile.bind(this)
    );
    this.on(
      'click keyup' + this.mobileSlideshowNamespace,
      selectors$28.nextButton,
      this._nextSlideMobile.bind(this)
    );
    this.on(
      'keydown' + this.mobileSlideshowNamespace,
      this._addKeyBindingsMobile.bind(this)
    );

    if (this.totalSlides > 1) {
      this.hammertime = new Hammer(this.$container[0]);

      // Import swipe gestures and only allow these two events
      this.hammertime
        .on('swipeleft', this._nextSlideMobile.bind(this))
        .on('swiperight', this._previousSlideMobile.bind(this));
    }

    this.$button.first().addClass(classes$25.buttonActive);

    utils.promiseStylesheet().then(
      function() {
        this._setSlideMobile(0);
        this._setMobileText(0);
        this._setSlideshowA11y();
        this.trigger('slideshow_mobile_init_done');
      }.bind(this)
    );
  },

  destroyMobileSlideshow: function() {
    this.trigger('slideshow_mobile_destroy');

    this.mobileSlideshow = false;
    this.$container.off(this.mobileSlideshowNamespace);

    if (this.totalSlides > 1) {
      this.hammertime.destroy();
    }
    
    //Added the loop for videos
    // Loop over every video slide that is found as part of this.players
    // and explicitly call the YouTube and/or Vimeo destroy method
    // depending on the type of video player.
    for (var key in this.players) {
      if (!this.players.hasOwnProperty(key)) return;

      var player = this.players[key];

      if (typeof player.destroy === 'function') {
        player.destroy();
      } else if (typeof player.unload === 'function') {
        player.unload();
      }
    }

    //This is part of the loop code added
    this.players = [];
  },

  _onClickIndicatorDot: function(evt) {
    var $indicatorDot = $(evt.target);
    var index = $indicatorDot.data('slide-index');

    evt.preventDefault();

    if (
      evt.type === 'keyup' &&
      !(
        evt.keyCode === utils.keyboardKeys.ENTER ||
        evt.keyCode === utils.keyboardKeys.SPACE
      )
    )
      return;

    this._setSlideMobile(index);

    if (evt.type === 'keyup' || evt.detail === 0) {
      this.$slideshow.focus();
    }
  },

  _addKeyBindingsMobile: function(evt) {
    if (evt.which === utils.keyboardKeys.LEFTARROW) {
      this._previousSlideMobile(evt);
    } else if (evt.which === utils.keyboardKeys.RIGHTARROW) {
      this._nextSlideMobile(evt);
    }
  },

  _previousSlideMobile: function(evt) {
    if (evt.type === 'click') {
      $(evt.target).addClass(classes$25.navigationNoFocus);
    }
    if (
      (evt.type === 'keyup' &&
        !(
          evt.keyCode === utils.keyboardKeys.ENTER ||
          evt.keyCode === utils.keyboardKeys.SPACE
        )) ||
      this.currentMobileSlide === 0
    ) {
      return;
    }

    this._setSlideMobile(this.currentMobileSlide - 1);
  },

  _nextSlideMobile: function(evt) {
    if (evt.type === 'click') {
      $(evt.target).addClass(classes$25.navigationNoFocus);
    }
    if (
      (evt.type === 'keyup' &&
        !(
          evt.keyCode === utils.keyboardKeys.ENTER ||
          evt.keyCode === utils.keyboardKeys.SPACE
        )) ||
      this.currentMobileSlide === this.totalSlides - 1
    ) {
      return;
    }

    this._setSlideMobile(this.currentMobileSlide + 1);
  },

  _setSlideMobile: function(slideIndex) {
    //Added these variables and the if statement 
    var $currentSlide = this.$slide.eq(this.currentMobileSlide);
    var $nextSlide = this.$slide.eq(slideIndex);
    var $video = $nextSlide.find(selectors$27.video);

    // We call _loadVideo() before we check to see if
    // this.currentDesktopSlide === slideIndex (below). This would never fire
    // on initial load if it was after the condition below since 0 === 0
    // would return true.
    if ($video.length) {
      this._loadVideo($video, $nextSlide);
    }
    //Everything above this was added
    
    if (this.currentMobileSlide === slideIndex) return;

    this.xPosition = slideIndex * 50;

    this.$buttons.css({
      transform: 'translate3d(-' + this.xPosition + '%, 0, 0)'
    });

    this._setActiveStates(slideIndex);
    this._setSlideA11y(slideIndex);
    this._setMobileText(slideIndex);

    this.currentMobileSlide = slideIndex;

    this.trigger('slideshow_set_slide', [slideIndex]);

    this.$navigationButtons.attr('disabled', false);

    if (this.currentMobileSlide === 0) {
      this.$navigationButtons
        .filter(selectors$28.previousButton)
        .attr('disabled', true);
    }

    if (this.currentMobileSlide === this.totalSlides - 1) {
      this.$navigationButtons
        .not(selectors$28.previousButton)
        .attr('disabled', true);
    }

    if (this.currentMobileSlide - 1 >= 0) {
      this.trigger('slideshow_previous_slide', [slideIndex - 1]);
    }

    if (this.currentMobileSlide + 1 < this.totalSlides) {
      this.trigger('slideshow_next_slide', [slideIndex + 1]);
    }
  },
	
  //Added _loadVideo method
   _loadVideo: function($video, $slide) {
     this.$video = $video;

     this.trigger('slideshow_video_load', [$video[0]]);

     return this._promiseVideo().then(
       function() {
         $slide.addClass(classes$24.videoLoaded);
         $slide.find(selectors$27.pauseButton).prop('disabled', false);
         this.trigger('slideshow_video_loaded', [$video[0]]);
       }.bind(this)
     );
   },

  //Added _promiseVideo method
  _promiseVideo: function() {
    var playerType = this.$video.attr('data-video-type');
    var promiseVideoPlayer;

    if (playerType === 'youtube') {
      promiseVideoPlayer = this._loadYoutubePlayer();
      this.$video.attr('tabindex', '-1');
    } else if (playerType === 'vimeo') {
      promiseVideoPlayer = this._loadVimeoPlayer();
      this.$video.find('iframe').attr('tabindex', '-1');
    }

    return promiseVideoPlayer;
  },

  //Added _loadYoutubePlayer method
  _loadYoutubePlayer: function() {
    var blockId = this.$video.attr('data-block-id');
    var videoId = this.$video.attr('data-video-id');

    return youtube
      .promisePlayer(this.$video[0], {
        videoId: videoId,
        ratio: 16 / 9,
        playerVars: {
          // eslint-disable-next-line camelcase
          iv_load_policy: 3,
          modestbranding: 1,
          autoplay: 1,
          playsinline: 1, //forbid fullscreen on ios
          controls: 0,
          showinfo: 0,
          wmode: 'opaque',
          branding: 0,
          autohide: 0,
          rel: 0
        },
        events: {
          onStateChange: function(evt) {
            // Video has ended, loop back to beginning
            if (evt.data === 0) {
              this.players[blockId].seekTo(0);
            }
          }.bind(this)
        }
      })
      .then(
        function(player) {
          this.players[blockId] = player;
          player.playVideo().mute();
          // The video will not play if the iframe is set to visibility: hidden
          // Need to set it seperately from other styles in order to resolve the promise
          $(player.a).css('visibility', 'visible');
          // set player to visible
          return $.Deferred(function(defer) {
            player.addEventListener('onStateChange', function(evt) {
              // Only resolve the promise if the video is playing
              if (evt.data === 1) {
                defer.resolve();
              }
            });
          });
        }.bind(this)
      );
  },

  //Added _loadVimeoPlayer method
  _loadVimeoPlayer: function() {
    var blockId = this.$video.attr('data-block-id');
    var videoId = this.$video.attr('data-video-id');

    return vimeo
      .promisePlayer(this.$video[0], {
        id: videoId,
        autoplay: true, 
        loop: true,
      	autopause: false,
      	muted: true,
        playsinline: true, //forbid fullscreen on ios
        // This property isn't reliable. The user might see the Vimeo playbar flash
        // as the video begins to play.
        playbar: false,
        background: true
      })
      .then(
        function(player) {
          this.players[blockId] = player;
          player.play();
          player.setVolume(0);

          return $.Deferred(function(defer) {
            player.on('loaded', function() {
              defer.resolve();
            });
          });
        }.bind(this)
      );
  },

  _setActiveStates: function(slideIndex) {
    this.$slide = this.$slide || $(selectors$28.slide, this.$container); // eslint-disable-line shopify/jquery-dollar-sign-reference
    this.$button = this.$button || $(selectors$28.button, this.$container); // eslint-disable-line shopify/jquery-dollar-sign-reference
    this.$dot = this.$dot || $(selectors$28.indicatorDots, this.$container); // eslint-disable-line shopify/jquery-dollar-sign-reference

    var $currentSlide = this.$slide.eq(this.currentMobileSlide);
    var $nextSlide = this.$slide.eq(slideIndex);

    $nextSlide.addClass(classes$25.slideActive).attr('aria-hidden', false);
    $currentSlide.addClass(classes$25.slideActiveTransitioning);

    utils.promiseTransitionEnd($nextSlide).then(function() {
      $currentSlide
        .removeClass(classes$25.slideActive)
        .removeClass(classes$25.slideActiveTransitioning)
        .attr('aria-hidden', true);
    });

    this.$button.removeClass(classes$25.buttonActive);

    this.$button.eq(slideIndex).addClass(classes$25.buttonActive);

    this.$dot.removeClass(classes$25.dotActive);
    this.$dot.eq(slideIndex).addClass(classes$25.dotActive);
  },

  _setSlideshowA11y: function() {
    this.$labels = this.$labels || this.$button.find(selectors$28.label); // eslint-disable-line shopify/jquery-dollar-sign-reference
    this.$ctaSingleSlide =
      this.$ctaSingleSlide || this.$button.find(selectors$28.ctaSingleSlide); // eslint-disable-line shopify/jquery-dollar-sign-reference

    this.$ctaSingleSlide.attr('tabindex', '0');
    this.$labels.attr('tabindex', '-1');
    this._setSlideA11y(0);

    $.each(
      this.$indicatorDots,
      function(index, indicatorDot) {
        $(indicatorDot).attr({
          'aria-controls': 'Slide' + index
        });
      }.bind(this)
    );
  },

  _setSlideA11y: function(slideIndex) {
    var $button = this.$button.eq(slideIndex);

    this.$ctasMultipleSlides =
      this.$ctasMultipleSlides ||
      this.$button.find(selectors$28.ctaMultipleSlides); // eslint-disable-line shopify/jquery-dollar-sign-reference

    if (this.$ctasMultipleSlides) {
      this.$ctasMultipleSlides.attr('tabindex', '-1');

      // All slide titles are tabbable. If the currently active button has a CTA
      // link, the CTA link becomes tabbable as well.
      if ($button.hasClass(classes$25.linkActive)) {
        this.$ctasMultipleSlides.eq(slideIndex).attr('tabindex', '0');
      }
    }

    $.each(
      this.$indicatorDots,
      function(index, indicatorDot) {
        $(indicatorDot).attr({
          'aria-label': this._slideLabel(slideIndex, index),
          'aria-current': slideIndex === index ? true : false
        });
      }.bind(this)
    );
  },

  _setMobileText: function(slideIndex) {
    var $currentTextContent = this.$mobileTextContent.eq(slideIndex);
    this.$ctaSingleSlide =
      this.$ctaSingleSlide || this.$button.find(selectors$28.ctaSingleSlide); // eslint-disable-line shopify/jquery-dollar-sign-reference

    if (this.$ctaSingleSlide.length) {
      // Adjust for buttons with labels on multiple lines.
      var paddingAdjustment =
        (this.$ctaSingleSlide.outerHeight() - 50) / 2 + 40;
      this.$mobileTextContent.css('padding-top', paddingAdjustment + 'px');
    }

    this.$mobileTextContent.hide();
    $currentTextContent.show();
  },

  _slideLabel: function(activeSlideIndex, currentIndex) {
    var label =
      activeSlideIndex === currentIndex
        ? theme.strings.slideshow.activeSlideA11yString
        : theme.strings.slideshow.loadSlideA11yString;

    return label.replace('[slide_number]', currentIndex + 1);
  }
};

 

 

 

 

Finally, we need to actually use the theme.js file. Right now your website is using the minimized version of theme.js called theme.min.js. The minimized version doesn't have the changes we just made. In your theme.liquid file go to line 90 and replace 'theme.min.js' with 'theme.js'. Line 90 should look like this:

 

 

 

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

 

 

 

 

Your featured slider video should now be working on mobile. 

After these changes I did notice that on desktop the play/pause button always showed and we did not want that as we wanted the video to be on repeat. So if this happens to you here is how to fix it. Go to the theme.scss.liquid file and add a 'display:none' to the 'slideshow__play-button'. Starting at line 6115 should look like the below:

 

 

 

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

 

 

 

 

I hope this helps. I tried to make it as straightforward as possible. 

rfi-apparel
New Member
4 0 0

Appreciate this HellQuake, just curious as this is listed for Home Page, would it also be the same setup to follow for Product Page Video embedding? 

I've embedded a video on my product page recently and when I select a size "small, medium, large, etc." the video pops up and plays, its an odd issue that I've reached out to Shopify Support on but wasn't sure if the above information would be a better-suited replacement instead of adding in the text:

<div style="text-align: centre;"><video controls="controls" width="100%" autoplay="autoplay" muted="" loop="loop">
<source src="<<embedded video link>>">
type="video/mp4" &gt;</video></div>

to the product page under "Description" > "Show HTML"

hellquake
Tourist
7 0 8

I haven't played around too much with the product page and looped videos. I think using that code in the description might be the easiest as you won't have to touch the theme's actual code. 

If you want a vimeo video to autoplay, muted and looped here is what you would put in the product page under "Description" > "Show HTML"

 

<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>
<p><br></p>

 

 

If you want a youtube video to autoplay, muted and looped here is what you would put:

 

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

 

corp41
Tourist
28 0 1

Hellquake, I appreciate this as well as everyone else. I'm not familiar with code. Is there a way you could be added as a collaborator and do this for me? I'll even send you a few bucks for your troubles. 

 

Thanks man!

Mystorystudios
Visitor
1 0 0

I did all of this and it doesn't work.

corp41
Tourist
28 0 1

It worked perfectly for me.

lmcoffeedrinks
Visitor
1 0 0

I just did all the steps as described and ended up withou any section in my homepage, on laptop and mobile. Did this also happen with anyone? I made sure I deleted all the code as supposed and replaced it with the one on the comment.

KATARINAb
Visitor
2 0 0

same for me, did you solve it in the end? and what was the problem? 

mayuum
Shopify Partner
4 0 1

Hi hellquake,

 

This is great! It works with my website just fine however, Narrative slideshow has a static cover image to show on mobile devices by default (instead of a video for desktop I guess) and it still shows just for a moment before the video starts playing so it's a bit annoying. Would you happen to know how to hide/not show this? Really hope you can help me! 

 

 

Surfinity
Visitor
2 0 0

Hey Hellquake,

 

I took at look at your solution for our site but our theme.js file only goes up to line 7665. I tried to replace the section on the lines where it is in our file however the video does not work after I add. Any chance you are for hire to modify the file for us?

Surfinity
Visitor
2 0 0

Hey Hellquake

 

Tried your solution and is not working for some reason.  our theme.js file only goes up to 7665. I did replace the sections that you had mentioned however after doing so, the video stops playing all together.

John277
Visitor
1 0 0

Hi, I have the same problem. I want that my Video Slide also plays on mobile devices. Can you help me here?

 

Ali_Sheikh
New Member
5 0 0

Hi facing the same issue. Tried multiple solutions.

Please help!

Visely-Team
Shopify Partner
1843 210 488

@Ali_Sheikh what's your store URL.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
Ali_Sheikh
New Member
5 0 0
Visely-Team
Shopify Partner
1843 210 488

@Ali_Sheikh your store is password protected.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
Ali_Sheikh
New Member
5 0 0

Apologies.

heres the password: ohtsew

Ali_Sheikh
New Member
5 0 0

Is there any update as the the issue still remains unsolved

aradhanab
Visitor
3 0 0

Hi, 

I hope you are well!

I am having the same problem and I am set to go live in a couple of hours. 

How can I make the video work on mobile mode? 

Thank you!! 

aradhanab
Visitor
3 0 0

@Visely-Team

 

Hi, 

I hope you are well!

I am having the same problem and I am set to go live in a couple of hours. 

How can I make the video work on mobile mode? 

Thank you!! 

 

www.kacchi.co.uk

password: braith 

Chris_NICSTAND
Visitor
1 0 0

Hey there- Ive the same problem but couldn't find a solution. Can you help me out? 
Nicstand.com

pw: asdfghjk

JEnander
New Member
7 0 0

Hey Chris, 

 

I see you found a solution and playing video on your store now? How did you manage?

 

//Johan

hellquake
Tourist
7 0 8

I found a solution for this issue, it does require code changes in 3 files. 

Couple of notes before making these changes:

  1.  Duplicate or make a copy and save the files you are changing so you always have the original.
  2.  If you change the screen size from desktop to mobile or visa versa you will notice around the 749px mark it reloads the video. This is do to it hitting the mobile size and where it normally would stop showing the video. I don't think most people will run into this, but wanted to make sure you all knew this in advance. 
  3. In the theme.js file where a lot of the work is done. I added the entire section that I changed some of the code in, that way you could copy and paste the whole section of code. I also tried to add comments to the places where I added the video code so you would know what I added.

Code Changes

In the theme.scss.liquid file comment out or delete the media query for the 'slideshow__video iframe'

.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;
  } 
 */

 

Next move to the theme.js file. This is where the heavy lifting is. What is happening is on mobile it is not initializing the call to load and play the video, so we need to add the code for that. All I did was grab the code that is loading and playing the video from the "Slideshow Desktop Extension" starting on line number 7173 and put it in the "Mobile Desktop Extension" starting on line number 7705. Below is the entire code block of the "Slideshow Mobile Extension" so you can copy this and completely replace that area. 

Start on line number 7173 and go to 8195. 

/*

Slideshow Mobile Extension
--------------------------------------------------------------------------------
Manages all the mobile behaviour of the home page slideshow


Events
------------

Name: slideshow_mobile_init_start
Description: Fired before the mobile slideshow begins to initialize
Payload: none

Name: slideshow_mobile_init_done
Description: Fired when the mobile slideshow is done initializing
Payload: none

Name: slideshow_mobile_destroy
Description: Fired when the mobile slideshow is destroyed
Payload: none

Name: slideshow_set_slide
Description: Fired when the user selects a specific slide
Payload: { number } Index of the slide being displayed

Name: slideshow_previous_slide
Description: Fired when the user selects the previous slide
Payload: { number } Index of the slide being displayed

Name: slideshow_next_slide
Description: Fired when the user selects the next slide
Payload: { number } Index of the slide being displayed

---Added the below for informational purposes---
Name: slideshow_video_load
Description: Fired when a video is being loaded in the slideshow
Payload: { object } Video player DOM object

Name: slideshow_video_loaded
Description: Fired when the video is done loading in the slideshow
Payload: { object } Video player DOM object
*/

var selectors$28 = {
  button: '.slideshow__button',
  buttons: '.slideshow__buttons',
  ctaMultipleSlides: '.slideshow__button-cta--multiple',
  ctaSingleSlide: '.slideshow__button-cta-single',
  label: '.slideshow__button-label',
  mobileTextContainer: '.slideshow__text-container-mobile',
  mobileTextContent: '.slideshow__text-content-mobile',
  navigationButtons: '[data-slider-navigation]',
  nextButton: '[data-slider-navigation-next]',
  previousButton: '[data-slider-navigation-previous]',
  slide: '.slideshow__slide',
  slideshow: '.slideshow',
  indicatorDots: '.slideshow__indicator',
  //Added video variable
  video: '.slideshow__video'
};

var classes$25 = {
  buttonActive: 'slideshow__button--active',
  dotActive: 'slideshow__indicator--active',
  linkActive: 'slideshow__button--link',
  slideActive: 'slideshow__slide--active',
  slideActiveTransitioning: 'slideshow__slide--transitioning',
  navigationNoFocus: 'slideshow__navigation-item--no-focus',
  //Added video classes
  videoLoaded: 'slideshow__video--loaded',
  videoPaused: 'slideshow__video--paused'
};

var slideshowMobile = {
  initMobileSlideshow: function() {
    this.trigger('slideshow_mobile_init_start');

    this.$slideshow = $(selectors$28.slideshow, this.$container);
    //Added slide for videos
    this.$slide = $(selectors$28.slide, this.$container);
    this.$buttons = $(selectors$28.buttons, this.$container);
    this.$button = $(selectors$28.button, this.$container);
    this.$navigationButtons = $(selectors$28.navigationButtons, this.$container);
    this.$ctaMultipleSlides = $(selectors$28.ctaMultipleSlides, this.$container);
    this.$ctaSingleSlide = $(selectors$28.ctaSingleSlide, this.$container);
    this.$indicatorDots = $(selectors$28.indicatorDots, this.$container);
    this.$mobileTextContainer = $(
      selectors$28.mobileTextContainer,
      this.$container
    );
    this.$mobileTextContent = $(selectors$28.mobileTextContent, this.$container);

    this.mobileSlideshow = true;
    this.currentMobileSlide = 0;
    this.totalSlides = this.$buttons.data('count');
    //Added players for videos
    this.players = [];
    this.xPosition = 0;
    this.mobileSlideshowNamespace = '.mobileSlideshow';

    // The header is above the slideshow in the iOS editor, so we need to
    // reduce it's height by the height of the header.
    if ($('html').hasClass('is-ios') && Shopify.designMode) {
      this.$slideshow.css('height', '-=60px');
    }

    this.on(
      'click keyup' + this.mobileSlideshowNamespace,
      selectors$28.indicatorDots,
      this._onClickIndicatorDot.bind(this)
    );
    this.on(
      'click keyup' + this.mobileSlideshowNamespace,
      selectors$28.previousButton,
      this._previousSlideMobile.bind(this)
    );
    this.on(
      'click keyup' + this.mobileSlideshowNamespace,
      selectors$28.nextButton,
      this._nextSlideMobile.bind(this)
    );
    this.on(
      'keydown' + this.mobileSlideshowNamespace,
      this._addKeyBindingsMobile.bind(this)
    );

    if (this.totalSlides > 1) {
      this.hammertime = new Hammer(this.$container[0]);

      // Import swipe gestures and only allow these two events
      this.hammertime
        .on('swipeleft', this._nextSlideMobile.bind(this))
        .on('swiperight', this._previousSlideMobile.bind(this));
    }

    this.$button.first().addClass(classes$25.buttonActive);

    utils.promiseStylesheet().then(
      function() {
        this._setSlideMobile(0);
        this._setMobileText(0);
        this._setSlideshowA11y();
        this.trigger('slideshow_mobile_init_done');
      }.bind(this)
    );
  },

  destroyMobileSlideshow: function() {
    this.trigger('slideshow_mobile_destroy');

    this.mobileSlideshow = false;
    this.$container.off(this.mobileSlideshowNamespace);

    if (this.totalSlides > 1) {
      this.hammertime.destroy();
    }
    
    //Added the loop for videos
    // Loop over every video slide that is found as part of this.players
    // and explicitly call the YouTube and/or Vimeo destroy method
    // depending on the type of video player.
    for (var key in this.players) {
      if (!this.players.hasOwnProperty(key)) return;

      var player = this.players[key];

      if (typeof player.destroy === 'function') {
        player.destroy();
      } else if (typeof player.unload === 'function') {
        player.unload();
      }
    }

    //This is part of the loop code added
    this.players = [];
  },

  _onClickIndicatorDot: function(evt) {
    var $indicatorDot = $(evt.target);
    var index = $indicatorDot.data('slide-index');

    evt.preventDefault();

    if (
      evt.type === 'keyup' &&
      !(
        evt.keyCode === utils.keyboardKeys.ENTER ||
        evt.keyCode === utils.keyboardKeys.SPACE
      )
    )
      return;

    this._setSlideMobile(index);

    if (evt.type === 'keyup' || evt.detail === 0) {
      this.$slideshow.focus();
    }
  },

  _addKeyBindingsMobile: function(evt) {
    if (evt.which === utils.keyboardKeys.LEFTARROW) {
      this._previousSlideMobile(evt);
    } else if (evt.which === utils.keyboardKeys.RIGHTARROW) {
      this._nextSlideMobile(evt);
    }
  },

  _previousSlideMobile: function(evt) {
    if (evt.type === 'click') {
      $(evt.target).addClass(classes$25.navigationNoFocus);
    }
    if (
      (evt.type === 'keyup' &&
        !(
          evt.keyCode === utils.keyboardKeys.ENTER ||
          evt.keyCode === utils.keyboardKeys.SPACE
        )) ||
      this.currentMobileSlide === 0
    ) {
      return;
    }

    this._setSlideMobile(this.currentMobileSlide - 1);
  },

  _nextSlideMobile: function(evt) {
    if (evt.type === 'click') {
      $(evt.target).addClass(classes$25.navigationNoFocus);
    }
    if (
      (evt.type === 'keyup' &&
        !(
          evt.keyCode === utils.keyboardKeys.ENTER ||
          evt.keyCode === utils.keyboardKeys.SPACE
        )) ||
      this.currentMobileSlide === this.totalSlides - 1
    ) {
      return;
    }

    this._setSlideMobile(this.currentMobileSlide + 1);
  },

  _setSlideMobile: function(slideIndex) {
    //Added these variables and the if statement 
    var $currentSlide = this.$slide.eq(this.currentDesktopSlide);
    var $nextSlide = this.$slide.eq(slideIndex);
    var $video = $nextSlide.find(selectors$27.video);

    // We call _loadVideo() before we check to see if
    // this.currentDesktopSlide === slideIndex (below). This would never fire
    // on initial load if it was after the condition below since 0 === 0
    // would return true.
    if ($video.length) {
      this._loadVideo($video, $nextSlide);
    }
    //Everything above this was added
    
    if (this.currentMobileSlide === slideIndex) return;

    this.xPosition = slideIndex * 50;

    this.$buttons.css({
      transform: 'translate3d(-' + this.xPosition + '%, 0, 0)'
    });

    this._setActiveStates(slideIndex);
    this._setSlideA11y(slideIndex);
    this._setMobileText(slideIndex);

    this.currentMobileSlide = slideIndex;

    this.trigger('slideshow_set_slide', [slideIndex]);

    this.$navigationButtons.attr('disabled', false);

    if (this.currentMobileSlide === 0) {
      this.$navigationButtons
        .filter(selectors$28.previousButton)
        .attr('disabled', true);
    }

    if (this.currentMobileSlide === this.totalSlides - 1) {
      this.$navigationButtons
        .not(selectors$28.previousButton)
        .attr('disabled', true);
    }

    if (this.currentMobileSlide - 1 >= 0) {
      this.trigger('slideshow_previous_slide', [slideIndex - 1]);
    }

    if (this.currentMobileSlide + 1 < this.totalSlides) {
      this.trigger('slideshow_next_slide', [slideIndex + 1]);
    }
  },
	
  //Added _loadVideo method
   _loadVideo: function($video, $slide) {
     this.$video = $video;

     this.trigger('slideshow_video_load', [$video[0]]);

     return this._promiseVideo().then(
       function() {
         $slide.addClass(classes$24.videoLoaded);
         $slide.find(selectors$27.pauseButton).prop('disabled', false);
         this.trigger('slideshow_video_loaded', [$video[0]]);
       }.bind(this)
     );
   },

  //Added _promiseVideo method
  _promiseVideo: function() {
    var playerType = this.$video.attr('data-video-type');
    var promiseVideoPlayer;

    if (playerType === 'youtube') {
      promiseVideoPlayer = this._loadYoutubePlayer();
      this.$video.attr('tabindex', '-1');
    } else if (playerType === 'vimeo') {
      promiseVideoPlayer = this._loadVimeoPlayer();
      this.$video.find('iframe').attr('tabindex', '-1');
    }

    return promiseVideoPlayer;
  },

  //Added _loadYoutubePlayer method
  _loadYoutubePlayer: function() {
    var blockId = this.$video.attr('data-block-id');
    var videoId = this.$video.attr('data-video-id');

    return youtube
      .promisePlayer(this.$video[0], {
        videoId: videoId,
        ratio: 16 / 9,
        playerVars: {
          // eslint-disable-next-line camelcase
          iv_load_policy: 3,
          modestbranding: 1,
          autoplay: 0,
          controls: 0,
          showinfo: 0,
          wmode: 'opaque',
          branding: 0,
          autohide: 0,
          rel: 0
        },
        events: {
          onStateChange: function(evt) {
            // Video has ended, loop back to beginning
            if (evt.data === 0) {
              this.players[blockId].seekTo(0);
            }
          }.bind(this)
        }
      })
      .then(
        function(player) {
          this.players[blockId] = player;
          player.playVideo().mute();
          // The video will not play if the iframe is set to visibility: hidden
          // Need to set it seperately from other styles in order to resolve the promise
          $(player.a).css('visibility', 'visible');
          // set player to visible
          return $.Deferred(function(defer) {
            player.addEventListener('onStateChange', function(evt) {
              // Only resolve the promise if the video is playing
              if (evt.data === 1) {
                defer.resolve();
              }
            });
          });
        }.bind(this)
      );
  },

  //Added _loadVimeoPlayer method
  _loadVimeoPlayer: function() {
    var blockId = this.$video.attr('data-block-id');
    var videoId = this.$video.attr('data-video-id');

    return vimeo
      .promisePlayer(this.$video[0], {
        id: videoId,
        loop: true,
        // This property isn't reliable. The user might see the Vimeo playbar flash
        // as the video begins to play.
        playbar: false,
        background: true
      })
      .then(
        function(player) {
          this.players[blockId] = player;
          player.play();
          player.setVolume(0);

          return $.Deferred(function(defer) {
            player.on('loaded', function() {
              defer.resolve();
            });
          });
        }.bind(this)
      );
  },

  _setActiveStates: function(slideIndex) {
    this.$slide = this.$slide || $(selectors$28.slide, this.$container); // eslint-disable-line shopify/jquery-dollar-sign-reference
    this.$button = this.$button || $(selectors$28.button, this.$container); // eslint-disable-line shopify/jquery-dollar-sign-reference
    this.$dot = this.$dot || $(selectors$28.indicatorDots, this.$container); // eslint-disable-line shopify/jquery-dollar-sign-reference

    var $currentSlide = this.$slide.eq(this.currentMobileSlide);
    var $nextSlide = this.$slide.eq(slideIndex);

    $nextSlide.addClass(classes$25.slideActive).attr('aria-hidden', false);
    $currentSlide.addClass(classes$25.slideActiveTransitioning);

    utils.promiseTransitionEnd($nextSlide).then(function() {
      $currentSlide
        .removeClass(classes$25.slideActive)
        .removeClass(classes$25.slideActiveTransitioning)
        .attr('aria-hidden', true);
    });

    this.$button.removeClass(classes$25.buttonActive);

    this.$button.eq(slideIndex).addClass(classes$25.buttonActive);

    this.$dot.removeClass(classes$25.dotActive);
    this.$dot.eq(slideIndex).addClass(classes$25.dotActive);
  },

  _setSlideshowA11y: function() {
    this.$labels = this.$labels || this.$button.find(selectors$28.label); // eslint-disable-line shopify/jquery-dollar-sign-reference
    this.$ctaSingleSlide =
      this.$ctaSingleSlide || this.$button.find(selectors$28.ctaSingleSlide); // eslint-disable-line shopify/jquery-dollar-sign-reference

    this.$ctaSingleSlide.attr('tabindex', '0');
    this.$labels.attr('tabindex', '-1');
    this._setSlideA11y(0);

    $.each(
      this.$indicatorDots,
      function(index, indicatorDot) {
        $(indicatorDot).attr({
          'aria-controls': 'Slide' + index
        });
      }.bind(this)
    );
  },

  _setSlideA11y: function(slideIndex) {
    var $button = this.$button.eq(slideIndex);

    this.$ctasMultipleSlides =
      this.$ctasMultipleSlides ||
      this.$button.find(selectors$28.ctaMultipleSlides); // eslint-disable-line shopify/jquery-dollar-sign-reference

    if (this.$ctasMultipleSlides) {
      this.$ctasMultipleSlides.attr('tabindex', '-1');

      // All slide titles are tabbable. If the currently active button has a CTA
      // link, the CTA link becomes tabbable as well.
      if ($button.hasClass(classes$25.linkActive)) {
        this.$ctasMultipleSlides.eq(slideIndex).attr('tabindex', '0');
      }
    }

    $.each(
      this.$indicatorDots,
      function(index, indicatorDot) {
        $(indicatorDot).attr({
          'aria-label': this._slideLabel(slideIndex, index),
          'aria-current': slideIndex === index ? true : false
        });
      }.bind(this)
    );
  },

  _setMobileText: function(slideIndex) {
    var $currentTextContent = this.$mobileTextContent.eq(slideIndex);
    this.$ctaSingleSlide =
      this.$ctaSingleSlide || this.$button.find(selectors$28.ctaSingleSlide); // eslint-disable-line shopify/jquery-dollar-sign-reference

    if (this.$ctaSingleSlide.length) {
      // Adjust for buttons with labels on multiple lines.
      var paddingAdjustment =
        (this.$ctaSingleSlide.outerHeight() - 50) / 2 + 40;
      this.$mobileTextContent.css('padding-top', paddingAdjustment + 'px');
    }

    this.$mobileTextContent.hide();
    $currentTextContent.show();
  },

  _slideLabel: function(activeSlideIndex, currentIndex) {
    var label =
      activeSlideIndex === currentIndex
        ? theme.strings.slideshow.activeSlideA11yString
        : theme.strings.slideshow.loadSlideA11yString;

    return label.replace('[slide_number]', currentIndex + 1);
  }
};

  

Finally, we need to actually use the theme.js file. Right now your website is using the minimized version of theme.js called theme.min.js. The minimized version doesn't have the changes we just made. In your theme.liquid file go to line 90 and replace 'theme.min.js' with 'theme.js'. Line 90 should look like this:

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

  

Your featured slider video should now be working on mobile. 

After these changes I did notice that on desktop the play/pause button always showed and we did not want that as we wanted the video to be on repeat. So if this happens to you here is how to fix it. Go to the theme.scss.liquid file and add a 'display:none' to the 'slideshow__play-button'. Starting at line 6115 should look like the below:

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

 

I hope this helps. I tried to make it as straightforward as possible. 

-hellquake

JeffAbney
Visitor
1 0 0

Amazing. Perfect. Thanks for the solution. This some real hero stuff.

Elza1
Visitor
1 0 0

The issue with the theme, in this case, is that the source code includes a rule to support video play-back only past a certain screen width threshold. If the screen of the mobile device is narrower than that minimum size, then the video does not play, and instead, you get your chosen thumbnail displayed. I believe the set minimum width was 749 points. Tablets would pass the threshold, phones in vertical view would not. They do if you rotate your screen, but that might as well distort the page's proportions. We've just looked at this and I can't give you any code snippets to fix it, but if you know which parts of the source code to look at, you might be able to figure out how to bypass or rewrite the rule. 

devy0425
Visitor
1 0 0

 So nobody has a solution for this? I was following other forum suggestions and was able to put a code that lets the video play regardless of screen size but then I could not edit the screen width. Can anyone help with resizing?

thespartner
New Member
5 0 0

Hi 

Please assist if you can - I have this same issue.

Thanks

Eric

Visely-Team
Shopify Partner
1843 210 488

@thespartner what's your store URL?

 

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
thespartner
New Member
5 0 0
www.thespartner.com, password "thespartner", thanks
Visely-Team
Shopify Partner
1843 210 488

@thespartner this is done by intention and the video is hidden through CSS on mobile devices and an overlay image is displayed instead.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
guddy7
Visitor
1 0 0

Hi @Visely-Team,

I have the same problem and I can see that the iframe section is hidden when changing from 800x600 window to a mobile one.

However, I don't know which lines should I change on my theme.scss.liquid.

Could you help me?

Best regards,

Alex

CopelandAudio
Tourist
8 0 2

Hi , I'm having the same issue, could you please help ? Many thanks

Visely-Team
Shopify Partner
1843 210 488

@CopelandAudio what's your store URL.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
CopelandAudio
Tourist
8 0 2

store URL is copeland-audio.myshopify.com 

Password: Estilla01 

Thanks a lot !

CopelandAudio
Tourist
8 0 2