为视频添加叠加倒计时

Question

如何将倒计时叠加到视频中？？？ 我试图定位：相对并在我的倒计时容器上添加顶部：10%，但它看起来不正确。 并将 height:0 放在视频部分 有人可以指导我吗？

测试地点：https://strokes-test.myshopify.com/ 我有以下代码：

主题.css

//video-hero
.video-section{
  position:relative;
}
.video-section video{
  position:relative;
  z-index:0;
}
#headline h1 {
  font-weight: normal;
  letter-spacing: .125rem;
  text-transform: uppercase;
}
.countdown-container {
  color: #333;
  margin: 0 auto;
  text-align: center;
}
#countdown li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

#countdown li span {
  display: block;
  font-size: 4.5rem;
}

.message {
  font-size: 4rem;
}

#content {
  display: none;
  padding: 1rem;
}

.emoji {
  padding: 0 .25rem;
}

@media all and (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  
  li {
    font-size: 1.125rem;
    padding: .75rem;
  }
  
  li span {
    font-size: 3.375rem;
  }
}

count-sn-p

  <h1 id="headline">COMING SOON</h1>
  <div id="countdown">
    <ul>
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>Hours</li>
      <li><span id="minutes"></span>Minutes</li>
      <li><span id="seconds"></span>Seconds</li>
    </ul>
  </div>
  <div class="message">
    <div id="content">
      <span class="emoji">????</span>
      <span class="emoji">????</span>
      <span class="emoji">????</span>
    </div>
  </div>
</div>

<script>
  (function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  let birthday = "Sep 30, 2021 00:00:00",
      countDown = new Date(birthday).getTime(),
      x = setInterval(function() {    

        let now = new Date().getTime(),
            distance = countDown - now;

        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

        //do something later when date is reached
        if (distance < 0) {
          let headline = document.getElementById("headline"),
              countdown = document.getElementById("countdown"),
              content = document.getElementById("content");

          headline.innerText = "It's my birthday!";
          countdown.style.display = "none";
          content.style.display = "block";

          clearInterval(x);
        }
        //seconds
      }, 0)
  }());
</script>

视频部分

<div class="video-section">
  {% if section.settings.vid_link != blank %}
  <video class="herovid-desktop" width="100%" playsinline loop muted autoplay>
    <source src="{{ section.settings.vid_link }}" type="video/mp4">
  </video>
  {% endif %}
  <!-- video hero mobile -->
  {% if section.settings.vid_link_mobile != blank %}
  <video class="herovid-mobile" width="100%" playsinline loop muted autoplay>
    <source src="{{ section.settings.vid_link_mobile }}" type="video/mp4">
  </video>
  {% endif %}
</div>

   {% if section.settings.title != blank %}
    {% if settings.count_down_collections %}
      {% assign dealTime = settings.home_productdeal_time | split: ' ' | join: ' ' | split: ' ' %}
      <h1> {% include 'countdown-for-video-hero' %}</h1>
      {% endif %}
      {% endif %}

  
{% schema %}
  {
    "name": "Video-Hero",
    "settings": 
[
    {
        "label": "Title",
        "id": "title",
        "type": "text"
    },
    {
        "type":"text",
        "id":"vid_link",
        "label":"Video Desktop Link"
    },
    {
        "type":"text",
        "id":"vid_link_mobile",
        "label":"Video Mobile Link"
    }
],
"presets":
[
    {
        "name":"Video-Hero",
        "category":"Custom Sections"
    }
]
    }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Answer 1

你能检查一下下面的代码吗？希望它对你有用。

您必须将 position:relative 赋予此 id="shopify-section-1614673934f87a38f5" 之类的

#shopify-section-1614673934f87a38f5 { 
  position:relative;
}

同样在本节内部 h1 中给出绝对位置

#shopify-section-1614673934f87a38f5 h1 { 
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 100%;
}