画像バナーなどを表示するとフッターが隠れてしまいます。
背景動画を表示しないと普通にサイトの一番下にフッターは表示されます。
どなたか解決法を教えていただけないでしょうか。
貼り付けているCSSです
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign img_url = block.settings.image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}
{% if block.type == ‘video’ %}
{%- if block.settings.video_link != blank -%}
{% endif %}
{% else %}
{% if block.settings.title != blank %}
{{ block.settings.title | escape }}
{% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { color: {{ block.settings.color_text }}!important; } {%- endstyle -%} {% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
{% if block.settings.title != blank %}
{{ block.settings.title | escape }}
{% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { color: {{ block.settings.color_text }}!important; } {%- endstyle -%} {% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
{{ block.settings.button_label | escape }}
{% endif %}
This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%}
.main-content .videoBackground {
margin-top: -55px;
}
.videoBackground {
height: 100%;
position: relative;
}
.videoBackground .fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
width: 100%;
height: 100%;
overflow: hidden;
}
.videoBackground .fullscreen-video-wrap .video-js {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
.videoBackground .fullscreen-video-wrap video {
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
.videoBackground .videoBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 500px;
max-height: 800px;
height: calc(100vh - 165px);
position: relative;
}
.videoBackground .imageBox {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
padding: 100px 20px 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
min-height: calc(100vh - 165px);
height: auto;
}
.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
z-index: 2;
text-align: center;
}
.videoBackground .overlay {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
z-index: 1;
}
.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
padding: 8px 15px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: normal;
font-size: 14px;
margin-top: 20px;
}
.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {
color: #FFF;
font-size: 30px;
line-height: 40px;
}
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
max-width: 500px;
margin: 0 auto;
}
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
font-size: 18px;
line-height: 28px;
}
.videoBackground .placeholderNoblocks {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.main-content .videoBackground {
margin-top: -35px;
}
.videoBackground .fullscreen-video-wrap {
z-index: 3;
}
.videoBackground .videoBox {
min-height: 500px;
height: 100%;
position: relative;
padding: 0;
}
.videoBackground .fullscreen-video-wrap {
position: relative;
min-height: 300px;
}
.videoBackground .videoBoxInfo {
padding: 40px 20px;
background: #000;
width: 100%;
}
}
{% schema %}
{
"name": {
"ja": "背景動画"
},
"class": "videoBackground",
"max_blocks": 1,
"blocks": [
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "url",
"id": "video_link",
"label": {
"ja": "リンク"
}
},
{
"type": "image_picker",
"id": "video_image",
"label": {
"ja": "サムネイル画像"
}
},
{
"type": "range",
"id": "overlay_opacity",
"label": {
"ja": "不透明度"
},
"min": 0,
"max": 99,
"step": 1,
"unit": {
"ja": "%"
},
"default": 0
},
{
"type": "header",
"content": {
"ja": "テキスト"
}
},
{
"type": "text",
"id": "title",
"label": {
"ja": "タイトル"
},
"default": "Video slide"
},
{
"type": "richtext",
"id": "text",
"label": {
"ja": "説明文"
},
"default": {
"ja": "Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
" } }, { "type": "color", "id": "color_text", "label": { "ja": "テキストカラー" }, "default": "#ffffff" }, { "type": "text", "id": "button_label", "label": { "ja": "ボタンラベル" } }, { "type": "url", "id": "button_link", "label": { "ja": "ボタンリンク" } }, { "type": "color", "id": "color_btn_bg", "label": { "ja": "ボタンの背景色" }, "default": "#ffffff" }, { "type": "color", "id": "color_btn_text", "label": { "ja": "ボタンの色" }, "default": "#ffffff" } ] }, { "type": "image", "name": "Image", "settings": [ { "type": "color", "id": "color_bg", "label": { "ja": "背景色 (optional)" }, "default": "#16165b" }, { "type": "image_picker", "id": "image_bg", "label": { "ja": "画像 (required)" } }, { "type": "range", "id": "overlay_opacity", "label": { "ja": "不透明度" }, "min": 0, "max": 99, "step": 1, "unit": { "ja": "%" }, "default": 0 }, { "type": "header", "content": { "ja": "テキスト" } }, { "type": "text", "id": "title", "default": "Image slide", "label": { "ja": "タイトル" } }, { "type": "richtext", "id": "text", "label": { "ja": "説明文" }, "default": { "ja": "Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
" } }, { "type": "color", "id": "color_text", "label": { "ja": "テキストカラー" }, "default": "#ffffff" }, { "type": "text", "id": "button_label", "label": { "ja": "ボタンラベル" } }, { "type": "url", "id": "button_link", "label": { "ja": "ボタンリンク" } }, { "type": "color", "id": "color_btn_bg", "label": { "ja": "ボタンの背景色" }, "default": "#ffffff" }, { "type": "color", "id": "color_btn_text", "label": { "ja": "ボタンの色" }, "default": "#ffffff" } ] } ], "presets": [ { "name": { "ja": "背景動画" }, "category": { "ja": "Main" }, "blocks": [ { "type": "video" } ] } ] } {% endschema %}