Danke für deine schnelle Antwort.
Wenn ich nur das css ändere passiert leider nichts.
Habe hier mal den gesamten Code: (Habe deine Änderungen bei <style> </style> eingefügt
<div class="hero">
<div>
<h1>{{ section.settings.heading }}</h1>
<a class='button' href='{{ section.settings.link_url }}'>{{ section.settings.link_text }}</a>
</div>
<video class="video-bg" autoplay muted loop playsinline poster={{ section.settings.poster }}>
<source src={{ section.settings.video_url }} type='video/mp4'>
</video>
</div>
{% schema %}
{
"name": "Video Background Banner",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Overlay text"
},
{
"type": "url",
"id": "video_url",
"label": "Enter the video url here"
},
{
"type": "image_picker",
"id": "poster",
"label": "Add fallback background image in case video doesn't load"
},
{
"type": "text",
"id": "link_text",
"label": "Enter CTA button text (if required)"
},
{
"type": "url",
"id": "link_url",
"label": "CTA button link page"
},
{
"type": "range",
"id": "blur",
"min": 0,
"max": 10,
"step": 0.1,
"unit": "px",
"label": "For low quality video add blur",
"default": 0
},
{
"type": "range",
"id": "opacity",
"min": 0,
"max": 1,
"step": 0.1,
"label": "Change video opacity",
"default": 1
}
],
"presets": [
{
"name": "Video Background Banner"
}
]
}
{% endschema %}
<style>
.video-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -1;
filter: blur(0px) opacity(1);
}
.hero {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
margin-bottom: 0px;
min-height: 75vh;
position: relative;
overflow: hidden;
}
.text-wrapper {
max-width: 1200px; /* Maximale Breite des Wrappers */
width: 100%;
padding: 1.5em;
box-sizing: border-box;
text-align: center;
}
.hero div {
padding: 1.5em;
}
#shopify-section-template--20774909641046__video_background_Gar8XP .hero {
margin-bottom: 24px;
text-align: left;
display: flex;
justify-content: center; /* Ändere dies von flex-start zu center */
align-items: center; /* Ändere dies von flex-start zu center */
}
#shopify-section-template--20774909641046__video_background_Gar8XP .hero > div {
width: 100%; /* Passt die Breite des inneren divs an */
max-width: 65rem; /* Setze eine maximale Breite */
margin-top: 2%;
margin-left: auto; /* Zentriert das Element horizontal */
margin-right: auto; /* Zentriert das Element horizontal */
}
#shopify-section-template--20774909641046__video_background_Gar8XP h1 {
font-weight: bold;
}
@media only screen and (max-width: 600px) {
#shopify-section-template--20774909641046__video_background_Gar8XP .hero {
display: none;
}
}
</style>
