Here's our store www.merit.store
I'm trying to get the button and text for a custom section I created (video with text overlay) to appear on top of the video. I also want to make the video have an overlay with adjustable opacity. I had this set up and working in a different theme but am trying to make it work on this theme (editions).
Two problems: First, when I put in my overlay it covers a big chunk of the page not just the video. Second, when I put in a position: relative div to make the video and text stack, the image from the div below moves up and stacks too. Here is the .liquid file for the section and the css i've added--how can I fix this?
<!-- /sections/index-mp4.liquid -->
{%- if section.settings.show_overlay -%}
<style>
.custom_overlay {
background-color: {{ section.settings.overlay_color }};
opacity: {{ section.settings.overlay_opacity | divided_by: 100.00}};
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height:100%;
width: 100%;
}
</style>
{%- endif -%}
<div class="{{ section.settings.height }} {{ section.settings.color }}" data-section-id="{{ section.id }}" data-section-type="banner" {% if section.settings.parallax %}data-img-src="{{ background_image }}"{% endif %}>
<div position="absolute">
<!-- <div class="custom_overlay"></div> -->
<video autoplay loop muted playsinline width="100%">
<source src="{{ section.settings.videofile }}" type="video/mp4" id="{{ section.id }}">
</video>
</div>
{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
<a href="{{ section.settings.link }}">
{% endif %}
<div id="index-mp4-video">
</div>
<div class="{{ section.settings.text_align }} preventOverflowContent" position="absolute">
{% unless section.settings.title == '' %}<h1 class="title--flex">{{ section.settings.title | escape }}</h1>{% endunless %}
{% unless section.settings.description == '' %}<p class="description" >{{ section.settings.description }}</p>{% endunless %}
{% unless section.settings.link_text == '' %}<a class="{{ section.settings.button_style }}" href="{{ section.settings.link }}">{{ section.settings.link_text | escape }}</a>{% endunless %}
</div>
</div>
<script type="text/javascript">
document.getElementById('{{ section.id }}').play();
$(function () {
if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$("video").prop('muted', false);
}
});
</script>
{% schema %}
{
"name": "Video MP4",
"settings": [
{
"type": "text",
"id": "videofile",
"label": "Video URL",
"default": "https://cdn.shopify.com/s/files/1/2018/8867/files/ice.mp4"
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Headline",
"default": "Video with text overlay"
},
{
"type": "textarea",
"id": "description",
"label": "Description",
"default": "This area is used to describe your store."
},
{
"type": "select",
"id": "text_align",
"label": "Alignment",
"default": "text-center",
"options": [
{ "value": "text-left", "label": "Align Left"},
{ "value": "text-center", "label": "Align Center"},
{ "value": "text-right", "label": "Align Right"}
]
},
{
"type": "select",
"id": "color",
"label": "Text color",
"default": "homepage--white",
"options": [
{ "value": "homepage--white", "label": "White"},
{ "value": "homepage--light", "label": "Light"},
{ "value": "homepage--splash", "label": "Accent"},
{ "value": "homepage--dark", "label": "Dark"}
]
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "View products"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "button",
"options": [
{ "value": "button", "label": "Regular"},
{ "value": "btn btn--large btn--clear", "label": "Make More Later"}
]
},
{
"type": "header",
"content": {
"cs": "Překryv",
"da": "Overlejring",
"de": "Überlagerung",
"en": "Overlay",
"es": "Superposición",
"fi": "Peitto",
"fr": "Superposition",
"it": "Sovrapposizione",
"ja": "オーバーレイ",
"ko": "오버레이",
"nb": "Overlegg",
"nl": "Overlay",
"pl": "Nakładka",
"pt-BR": "Sobreposição",
"pt-PT": "Sobreposição",
"sv": "Överlagring",
"th": "การวางซ้อน",
"tr": "Yer paylaşımı",
"vi": "Lớp phủ",
"zh-CN": "叠加",
"zh-TW": "疊加層"
}
},
{
"type": "checkbox",
"id": "show_overlay",
"label": {
"cs": "Zobrazit překryv",
"da": "Vis overlejring",
"de": "Überlagerung anzeigen",
"en": "Show overlay",
"es": "Mostrar superposición",
"fi": "Näytä peittokuva",
"fr": "Afficher la superposition",
"it": "Mostra sovrapposizione",
"ja": "オーバーレイを表示する",
"ko": "오버레이 표시",
"nb": "Vis overlegg",
"nl": "Overlay weergeven",
"pl": "Pokaż nakładkę",
"pt-BR": "Exibir sobreposição",
"pt-PT": "Mostrar sobreposição",
"sv": "Visa överlagring",
"th": "แสดงการวางซ้อน",
"tr": "Yer paylaşımını göster",
"vi": "Hiển thị lớp phủ",
"zh-CN": "显示叠加",
"zh-TW": "顯示疊加層"
},
"default": true
},
{
"type": "color",
"id": "overlay_color",
"label": {
"cs": "Barva překryvu",
"da": "Farve på overlejring",
"de": "Überlagerungsfarbe",
"en": "Overlay Color",
"es": "Color de superposición",
"fi": "Värikerros",
"fr": "Couleur de superposition",
"it": "Colore sovrapposizione",
"ja": "オーバーレイの色",
"ko": "오버레이 색상",
"nb": "Overleggsfarge",
"nl": "Kleur van overlay",
"pl": "Kolor nakładki",
"pt-BR": "Cor de sobreposição",
"pt-PT": "Cor de sobreposição",
"sv": "Överlagringsfärg",
"th": "สีซ้อนทับ",
"tr": "Yer Paylaşımı Rengi",
"vi": "Màu lớp phủ",
"zh-CN": "叠加颜色",
"zh-TW": "疊加層顏色"
},
"default": "#000000"
},
{
"type": "color",
"id": "overlay_text",
"label": {
"cs": "Barva textu",
"da": "Tekstfarve",
"de": "Textfarbe",
"en": "Text color",
"es": "Color de la fuente",
"fi": "Tekstin väri",
"fr": "Couleur du texte",
"it": "Colore del testo",
"ja": "テキストの配色",
"ko": "텍스트 색상",
"nb": "Tekstfarge",
"nl": "Tekstkleur",
"pl": "Kolor tekstu",
"pt-BR": "Cor do texto",
"pt-PT": "Cor do texto",
"sv": "Textfärg",
"th": "สีข้อความ",
"tr": "Metin rengi",
"vi": "Màu chữ",
"zh-CN": "文本颜色",
"zh-TW": "文字顏色"
},
"default": "#ffffff"
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"cs": "Neprůhlednost překryvu",
"da": "Overlejringens uigennemsigtighed",
"de": "Überlagerungsdeckkraft",
"en": "Overlay opacity",
"es": "Opacidad superpuesta",
"fi": "Peittokuvan läpinäkyvyys",
"fr": "Opacité de la superposition",
"it": "Opacità della sovrapposizione",
"ja": "オーバーレイ不透明率",
"ko": "오버레이 불투명도",
"nb": "Overleggets gjennomsiktighet",
"nl": "Ondoorschijnendheid van overlay",
"pl": "Nieprzezroczystość nakładki",
"pt-BR": "Opacidade de sobreposição",
"pt-PT": "Opacidade de sobreposição",
"sv": "Överlagring av opacitet",
"th": "ความทึบของการวางซ้อน",
"tr": "Yer paylaşımı opaklığı",
"vi": "Độ chắn sáng của lớp phủ",
"zh-CN": "叠加不透明度",
"zh-TW": "疊加層不透明度"
},
"min": 0,
"max": 100,
"step": 1,
"unit": {
"cs": "%",
"da": "%",
"de": "%",
"en": "%",
"es": "%",
"fi": "%",
"fr": "%",
"it": "%",
"ja": "%",
"ko": "%",
"nb": "%",
"nl": "%",
"pl": "%",
"pt-BR": "%",
"pt-PT": "%",
"sv": "%",
"th": "%",
"tr": "%",
"vi": "%",
"zh-CN": "%",
"zh-TW": "%"
},
"default": 25
}
],
"presets": [
{
"name": "Video with text overlay",
"category": "Video"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
//button for call-to-action section
.button {
font-family: Helvetica, "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
display: inline-block;
padding: 0.85em 1.5em;
font-size: 1.5em;
cursor: pointer;
text-decoration: none;
color: #ffffff;
background-color: /*!setting.submit-button-color{*/#00a044/*}*/;
border: none;
border-radius: 0.62em;
background-color: /*!setting.submit-button-color{*/#00a044/*}*/;
margin: 20px;
}
.button:hover{
background-color: #018739;
color: #ffffff;
}
a.button:visited {color: #FFFFFF}
//Overlay video text css
.video-container {
position: relative;
text-align: center;
}
.video-background{padding-top: 55px;}
.video_text {
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
font-size: 25px;
transform: translate(-50%, -50%);
padding: 0px;}
@media only screen and (max-width: 767px) {
.video_text{font-size: 12px; top: 80%;}
.video_text .h2 { font-size: 18px; }
}
.description {
font-family: Helvetica, "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
font-style: normal;
font-weight: 300;
font-size: 1.125em;
}
