Hi, I've created a snippet where you can load a mp4 background video, and I made it resizable depending on the window size, but, it only works when I'm on edit mode, so, when I save the page, the size of the background doesn't change.

I copied how odoo does this but with youtube videos with the Picture Snippet.

options.xml

<odoo>
    <!-- Snippet options -->
    <template id="s_video_opt" inherit_id="website.snippet_options">
        <xpath expr="." position="inside">
            <div data-js="s_video_options" data-selector=".s_video" > <!-- Options group -->
                <we-button data-video_ask="" data-no-preview="true">
                    Mp4 Background Video
                </we-button>
            </div>
        </xpath>
    </template>
</odoo>

video_editor.js

odoo.define('theme_ramon.s_video_options', function (require) {
    "use strict";
    var core = require("web.core");
    var options = require("web_editor.snippets.options");
    var utils = require("website.utils");
    var _t = core._t;

    options.registry.s_video_options = options.Class.extend({

        /**
         * Let user edit Video link
         */
        video_ask: function (previewMode, value) {
            var self = this;
            var def = utils.prompt({
                'id': 'website_snippet_video_ask',
                "window_title": _t("Edit Video"),
                "textarea": _t("Paste video link"),
                });
            def.then(function (data) {
                self.$target.find(".video_container").find(".background_video").attr('src', data.val);
            });
            return def;
        },

        _adjustVideo: function () {

            // this.$iframe.removeClass('show');
            // Adjust the iframe
            console.log(this.$target);
            var wrapperWidth = this.$target.innerWidth();
            var wrapperHeight = this.$target.innerHeight();
            var videoHeight = (this.$target.find(".video_container").find(".background_video")[0].videoHeight);
            var videoWidth = (this.$target.find(".video_container").find(".background_video")[0].videoWidth);

            var ratio= videoWidth / videoHeight;
            if(videoHeight == 0 || videoWidth == 0){
                ratio= 21/9;
            }
            var relativeRatio = (wrapperWidth / wrapperHeight) / (ratio);
            var style = {};
            if (relativeRatio >= 1.0) {
                style['width'] = '100%';
                style['height'] = (relativeRatio * 100) + '%';
                style['left'] = '0';
                style['top'] = (-(relativeRatio - 1.0) / 2 * 100) + '%';
            } else {
                style['width'] = ((1 / relativeRatio) * 100) + '%';
                style['height'] = '100%';
                style['left'] = (-((1 / relativeRatio) - 1.0) / 2 * 100) + '%';
                style['top'] = '0';
            }
            this.$target.find(".video_container").find(".background_video").css(style);

        },

        onBuilt: function () {
            var self = this;
            this._super();
            this.video_ask('click').guardedCatch(function () {
                self.getParent()._onRemoveClick($.Event( "click" ));
            });
            this._adjustVideo();
            var throttledUpdate = _.throttle(() => this._adjustVideo(), 50);
            $(window).on('resize.' + "background_video", throttledUpdate);

        },
    });
});