添加叠加倒计时视频

Question

如何将我的倒计时叠加到视频??我试图定位:相对并添加顶部:10%在我的倒计时容器，但它看起来不正确。在视频部分写上height:0有人能指点我一下吗?

测试站点:https://strokes-test.myshopify.com/我有下面的代码:

theme.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-snippet

<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">like

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

同样在这个section中inner h1给出绝对位置，如

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