diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 681f6719354..7acb36d284b 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -6,9 +6,9 @@ odoo.define('website.content.snippets.animation', function (require) {
*/
var Class = require('web.Class');
+var config = require('web.config');
var core = require('web.core');
var mixins = require('web.mixins');
-var utils = require('web.utils');
var publicWidget = require('web.public.widget');
var utils = require('web.utils');
@@ -681,6 +681,113 @@ registry.mediaVideo = publicWidget.Widget.extend({
},
});
+registry.backgroundVideo = publicWidget.Widget.extend({
+ selector: '.o_background_video',
+ xmlDependencies: ['/website/static/src/xml/website.background.video.xml'],
+ disabledInEditableMode: false,
+
+ /**
+ * @override
+ */
+ start: function () {
+ var proms = [this._super(...arguments)];
+
+ this.videoSrc = this.el.dataset.bgVideoSrc;
+ this.iframeID = _.uniqueId('o_bg_video_iframe_');
+
+ this.isYoutubeVideo = this.videoSrc.indexOf('youtube') >= 0;
+ this.isMobileEnv = config.device.size_class <= config.device.SIZES.LG && config.device.touch;
+ if (this.isYoutubeVideo && this.isMobileEnv) {
+ this.videoSrc = this.videoSrc + "&enablejsapi=1";
+
+ if (!window.YT) {
+ proms.push(new Promise(resolve => {
+ window.onYouTubeIframeAPIReady = () => resolve();
+ }));
+ $('', {
+ src: 'https://www.youtube.com/iframe_api',
+ }).appendTo('head');
+ }
+ }
+
+ $(window).on('resize.' + this.iframeID, _.throttle(() => this._adjustIframe(), 50));
+
+ return Promise.all(proms).then(() => this._appendBgVideo());
+ },
+ /**
+ * @override
+ */
+ destroy: function () {
+ this._super.apply(this, arguments);
+
+ $(window).off('resize.' + this.iframeID);
+
+ if (this.$bgVideoContainer) {
+ this.$bgVideoContainer.remove();
+ }
+ },
+
+ //--------------------------------------------------------------------------
+ // Private
+ //--------------------------------------------------------------------------
+
+ /**
+ * Adjusts iframe sizes and position so that it fills the container and so
+ * that it is centered in it.
+ *
+ * @private
+ */
+ _adjustIframe: function () {
+ // Adjust the iframe
+ var wrapperWidth = this.$target.innerWidth();
+ var wrapperHeight = this.$target.innerHeight();
+ var relativeRatio = (wrapperWidth / wrapperHeight) / (16 / 9);
+ 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.$iframe.css(style);
+ },
+ /**
+ * Append background video related elements to the target.
+ *
+ * @private
+ */
+ _appendBgVideo: function () {
+ var $oldContainer = this.$bgVideoContainer || this.$('> .o_bg_video_container');
+ this.$bgVideoContainer = $(qweb.render('website.background.video', {
+ videoSrc: this.videoSrc,
+ iframeID: this.iframeID,
+ }));
+ this.$iframe = this.$bgVideoContainer.find('.o_bg_video_iframe');
+ this.$iframe.one('load', () => {
+ this.$bgVideoContainer.find('.o_bg_video_loading').remove();
+ });
+ this.$bgVideoContainer.prependTo(this.$target);
+ $oldContainer.remove();
+
+ this._adjustIframe();
+
+ // YouTube does not allow to auto-play video in mobile devices, so we
+ // have to play the video manually.
+ if (this.isMobileEnv && this.isYoutubeVideo) {
+ new window.YT.Player(this.iframeID, {
+ events: {
+ onReady: ev => ev.target.playVideo(),
+ }
+ });
+ }
+ },
+});
+
registry.ul = publicWidget.Widget.extend({
selector: 'ul.o_ul_folded, ol.o_ul_folded',
events: {
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index baa1d8c5a7c..a5f46382dcf 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -29,6 +29,102 @@ options.Class.include({
},
});
+options.registry.background.include({
+
+ //--------------------------------------------------------------------------
+ // Private
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ _getEditableMedia: function () {
+ if (!this._hasBgvideo()) {
+ return this._super(...arguments);
+ }
+ return this.$('.o_bg_video_iframe')[0];
+ },
+ /**
+ * @override
+ */
+ _getMediaDialogOptions: function () {
+ return _.extend(this._super(...arguments), {
+ // For now, disable the possibility to have a parallax video bg
+ noVideos: this.$target.is('.parallax, .s_parallax_bg'),
+ isForBgVideo: true,
+ });
+ },
+ /**
+ * @override
+ */
+ _setActive: function () {
+ this._super(...arguments);
+ if (this._hasBgvideo()) {
+ this.$el.find('[data-choose-image]').addClass('active');
+ }
+ },
+ /**
+ * Updates the background video used by the snippet.
+ *
+ * @private
+ * @see this.selectClass for parameters
+ */
+ _setBgVideo: function (previewMode, value) {
+ this.$('> .o_bg_video_container').toggleClass('d-none', previewMode === true);
+
+ if (previewMode !== false) {
+ return;
+ }
+
+ var target = this.$target[0];
+ target.classList.toggle('o_background_video', !!(value && value.length));
+ if (value && value.length) {
+ target.dataset.bgVideoSrc = value;
+ } else {
+ delete target.dataset.bgVideoSrc;
+ }
+ this._refreshPublicWidgets();
+ this._setActive();
+ },
+ /**
+ * Returns whether the current target has a background video or not.
+ *
+ * @private
+ * @returns {boolean}
+ */
+ _hasBgvideo: function () {
+ return this.$target[0].classList.contains('o_background_video');
+ },
+
+ //--------------------------------------------------------------------------
+ // Handlers
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ _onBackgroundColorUpdate: function (ev, previewMode) {
+ var ret = this._super(...arguments);
+ if (ret) {
+ this._setBgVideo(previewMode);
+ }
+ return ret;
+ },
+ /**
+ * @override
+ */
+ _onSaveMediaDialog: function (data) {
+ if (!data.bgVideoSrc) {
+ this._setBgVideo(false);
+ this._super(...arguments);
+ return;
+ }
+ // if the user chose a video, only add the video without removing the
+ // background
+ this._setBgVideo(false, data.bgVideoSrc);
+ },
+});
+
options.registry.menu_data = options.Class.extend({
xmlDependencies: ['/website/static/src/xml/website.editor.xml'],
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 9e2d187f8a1..e2866e56a89 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -257,6 +257,26 @@ font[class*='bg-'] {
}
}
+// Background videos
+.o_background_video {
+ position: relative;
+
+ > * {
+ position: relative;
+ }
+}
+.o_bg_video_container {
+ @include o-position-absolute(0, 0 ,0 ,0);
+ overflow: hidden;
+}
+.o_bg_video_iframe {
+ position: relative;
+ pointer-events: none !important;
+}
+.o_bg_video_loading {
+ @include o-position-absolute(0, 0 ,0 ,0);
+}
+
// Probably outdated
// Lists
.o_ul_toggle {
diff --git a/addons/website/static/src/xml/website.background.video.xml b/addons/website/static/src/xml/website.background.video.xml
new file mode 100644
index 00000000000..548ce2aabb2
--- /dev/null
+++ b/addons/website/static/src/xml/website.background.video.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index bbda42f5ffb..5d6059c2c35 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1317,7 +1317,7 @@
data-selector="section, .parallax, :not(.o_gallery > .container) > .carousel"
data-exclude=".s_hr, .s_image_gallery">
- Background Image
+ Background