Shopify 商店背景视频未在移动设备上显示答案

【问题标题】：Shopify store background video didn't show on mobile deviceShopify 商店背景视频未在移动设备上显示
【发布时间】：2018-03-30 03:05:45
【问题描述】：

您好，我有一个基于 Shopify 的网站，我想要一个漂亮的背景视频，所以我在 slidshow.liquid 文件上编写了代码，背景视频在正常大小的浏览器上可以正常工作，但是当它在移动设备上查看时，我看不到背景视频，而是留下了很多空白。

核心代码如下：

{% if section.settings.displayBGVOrNot == true %}
  <div id="videoSection" class="background-video">
    <video playinline autoplay muted loop id="bgvid">
      <source src="{{ section.settings.background_video_url }}" type="video/webm">
    </video>
  </div>
{% endif %}

{% javascript %}
  $(document).ready(function() {
    var viewPointHeight = $(window).height();
    var viewPointWeight = $(window).width();
    $('.background-video').css('height', viewPointHeight - 40 + 'px');
    $('.background-video').css('width', viewPointWeight + 'px');
  });
  $(window).resize($.debounce(250,
    function() {
      var viewPointHeight = $(window).height();
      var viewPointWeight = $(window).width();
      $('.background-video').css('height', viewPointHeight - 40 + 'px');
      $('.background-video').css('width', viewPointWeight + 'px');
    })
  );
{% endjavascript %}

      #videoSection {
    position: relative;
    overflow: hidden;
  }
  video#bgvid {
      position: relative;
      width: 100%;
      z-index: 0;
      background-size: cover;
  }
  @media screen and (max-device-width: 800px) {
    html {
         background: url(polina.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
  }

网站是https://opusion.com/，您可以在移动设备上查看。

谢谢！

【问题讨论】：

标签： jquery html css responsive-design shopify

【解决方案1】：

这很简单。在您的 CSS 中，有一个适用于较小设备的条件（媒体查询）。

@media screen and (max-device-width: 800px) {..

这意味着，“对小于 800 像素的所有设备执行以下操作”。在该块中，display: none 后面是#bgvid，这是您的视频容器的 ID。您也可以将其删除以在移动设备上显示视频。

但是：请记住，向移动客户展示视频并不是一个坏习惯。带宽受到更多限制，根据您的视频实现，设备可能无法播放视频，因为不支持编解码器或视频格式。

【讨论】：