Shopify自定义视频区块移动端双视频未堆叠适配问题咨询

你可以直接在现有CSS代码末尾添加以下移动端适配规则，即可实现小屏幕下两个视频自动上下堆叠排列：

/* 原有代码保留即可，以下为新增/优化部分 */
/* 清除浮动，避免父容器高度塌陷 */
.video-container::after {
  content: "";
  display: table;
  clear: both;
}

/* 767px为通用移动端断点，可根据你的主题实际适配规则调整阈值 */
@media (max-width: 767px) {
  #multiple-left,
  #multiple-right {
    width: 100%;
    float: none;
    /* 移动端间距可按需调整数值 */
    padding: 10px 0;
  }
}

如果测试后发现移动端视频间距不符合预期，直接修改媒体查询内的padding数值即可。

内容的提问来源于stack exchange，提问作者user3324600