Shopify 产品页图片轮播支持视频

Shopify作为一个轻量级的电商托管系统，在外贸、跨境电商等领域里深受用户喜爱，你只需简单的几步设置，就能开通自己的网店。

一般的shopify主题里产品页面都会有图片轮播（类似某宝那样的产品图片介绍），但是不支持视频。那么我们就通过js来实现视频功能：

$(function(){

  $(".product-single__photo").each(function(){

    var alt = $(this).attr("alt");

    var videoContent = '';

    if (alt.indexOf("youtube") >= 0){

      videoContent = '<div class="video-container youtube">' + alt + '</div>';

    } else if (alt.indexOf("vimeo") >= 0) {

      videoContent = '<div class="video-container vimeo">' + alt + '</div>';

    }

    

    if(videoContent != ''){

      $(this).parent().html(videoContent);

      $(".video-container iframe").height($(".video-container").width()*9/16);

      $(".video-container embed").height($(".video-container").width()*9/16);

    }

  });

  

  $(".product-single__photo2").each(function(){

    var alt = $(this).attr("alt");

    var videoContent = '';

    if (alt.indexOf("youtube") >= 0){

      videoContent = '<div class="video-container2 youtube">' + alt + '</div>';

    } else if (alt.indexOf("vimeo") >= 0) {

      videoContent = '<div class="video-container2 vimeo">' + alt + '</div>';

    }

    

    if(videoContent != ''){

      $(this).parent().html(videoContent);

      $(".video-container2 iframe").height("400px");

      $(".video-container2 embed").height("400px");

    }

  });

  

});