{ { 'section-image-banner.css' | asset_url | stylesheet_tag  } }

<div class = "video-banner" >

</div>

{ % schema % } 

{
    "name": "Video Background Bannerx",
    "tag": "section",
    "class": "video-hero",
    "settings": [{
            "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"
        }

    ],
    "blocks": [{
            "type": "heading",
            "name": "Heading",
            "limit": 1,
            "settings": [{
                    "type": "text",
                    "id": "heading",
                    "default": "Video banner",
                    "label": "Video Banner"
                },
                {
                    "type": "select",
                    "id": "heading_size",
                    "options": [{
                            "value": "h2",
                            "label": "small"
                        },
                        {
                            "value": "h1",
                            "label": "medium"
                        }
                    ],
                    "default": "h1",
                    "label": "heading_size"
                }
            ]
        },
        {
            "type": "text",
            "name": "Text",
            "limit": 1,
            "settings": [{
                    "type": "text",
                    "id": "text",
                    "default": "Give customers details about the banner image(s) or content on the template.",
                    "label": "text label"
                },
                {
                    "type": "select",
                    "id": "text_style",
                    "options": [{
                            "value": "body",
                            "label": "Body"
                        },
                        {
                            "value": "subtitle",
                            "label": "Subtitle"
                        },
                        {
                            "value": "caption-with-letter-spacing",
                            "label": "Upperclass"
                        }
                    ],
                    "default": "body",
                    "label": "settings"
                }
            ]
        },
        {
            "type": "buttons",
            "name": "Buttons",
            "limit": 1,
            "settings": [{
                    "type": "text",
                    "id": "button_label_1",
                    "default": "Button label",
                    "label": "label_1.label",
                    "info": "abel_1.info"
                },
                {
                    "type": "url",
                    "id": "button_link_1",
                    "label": "link_1.label"
                },
                {
                    "type": "checkbox",
                    "id": "button_style_secondary_1",
                    "default": false,
                    "label": "secondary_1.label"
                },
                {
                    "type": "text",
                    "id": "button_label_2",
                    "default": "Button label",
                    "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
                    "info": "button_label_2.info"
                },
                {
                    "type": "url",
                    "id": "button_link_2",
                    "label": "button_link_2.label"
                },
                {
                    "type": "checkbox",
                    "id": "button_style_secondary_2",
                    "default": false,
                    "label": "button_style_secondary_2.label"
                }
            ]
        }
    ],
    "presets": [{
        "name": "Video Background Banner"
    }]
} {
    % endschema %
}

<style >
    .media > video {
        object - fit: cover;
        object - position: center center;
        transition: opacity .4 s cubic - bezier(.25, .46, .45, .94);
    } 
</style>