snippet_video_bg ported to 11.0

7 years ago · 3ee2b3b16c
27 changed files with 668 additions and 0 deletions
--- a/snippet_video_bg/init.py
+++ b/snippet_video_bg/init.py
@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+from . import controllers
--- a/snippet_video_bg/manifest.py
+++ b/snippet_video_bg/manifest.py
@ -0,0 +1,47 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#    Copyright (C) 2017-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Hilar AK(<hilar@cybrosys.in>)
+#    you can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    It is forbidden to publish, distribute, sublicense, or sell copies
+#    of the Software or modified copies of the Software.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    GENERAL PUBLIC LICENSE (LGPL v3) along with this program.
+#    If not, see <https://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+{
+    'name': "Website Video Background",
+    'version': '10.0.1.0.2',
+    'summary': """Make Website Background as Video""",
+    'description': """
+       Website page background as youtube video.
+    """,
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'website': "https://cybrosys.com/",
+    'category': 'Website',
+    'depends': ['base', 'website'],
+    'data': [
+        'views/assets.xml',
+        'views/conf_view.xml',
+        'views/templates.xml',
+    ],
+    'demo': [
+    ],
+    'images': ['static/description/banner.jpg'],
+    'license': 'LGPL-3',
+    'installable': True,
+    'application': False
+}
--- a/snippet_video_bg/manifest.py~
+++ b/snippet_video_bg/manifest.py~
@ -0,0 +1,47 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#    Copyright (C) 2017-TODAY Cybrosys Technologies(<https://www.cybrosys.com>).
+#    Author: Hilar AK(<hilar@cybrosys.in>)
+#    you can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    It is forbidden to publish, distribute, sublicense, or sell copies
+#    of the Software or modified copies of the Software.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    GENERAL PUBLIC LICENSE (LGPL v3) along with this program.
+#    If not, see <https://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+{
+    'name': "Website Video Background",
+    'version': '10.0.1.0.1',
+    'summary': """Make Website Background as Video""",
+    'description': """
+       Website page background as youtube video.
+    """,
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'website': "https://cybrosys.com/",
+    'category': 'Website',
+    'depends': ['base', 'website'],
+    'data': [
+        'views/views.xml',
+        'views/conf_view.xml',
+        'views/templates.xml',
+    ],
+    'demo': [
+    ],
+    'images': ['static/description/banner.jpg'],
+    'license': 'LGPL-3',
+    'installable': True,
+    'application': False
+}
--- a/snippet_video_bg/controllers/init.py
+++ b/snippet_video_bg/controllers/init.py
@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+from . import controllers
--- a/snippet_video_bg/controllers/controllers.py
+++ b/snippet_video_bg/controllers/controllers.py
@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+from odoo import http
+from odoo.http import request
+
+
+class SnippetVideoBg(http.Controller):
+
+    @http.route('/set_video_id', type='json', auth="user", methods=['POST'], website=True)
+    def index(self, **kw):
+        """
+        Here set the system param video id.
+        :param kw:
+        :return:
+        """
+        video_id = kw.get('id')
+        request.env['ir.config_parameter'].set_param(
+            'video_id', video_id) if video_id else ''
+        return '/'
+
+    @http.route('/get_video_id', type='json', methods=['GET', 'POST'], auth="public", website=True)
+    def getVideoId(self, **kw):
+        """
+        returns the saved video id.
+        :param kw:
+        :return:
+        """
+        video_id = request.env['ir.config_parameter'].get_param('video_id')
+        return {'video_id': video_id}
--- a/snippet_video_bg/demo/demo.xml
+++ b/snippet_video_bg/demo/demo.xml
@ -0,0 +1,30 @@
+<odoo>
+    <data>
+        <!--  -->
+        <!--   <record id="object0" model="snippet_video_bg.snippet_video_bg"> -->
+        <!--     <field name="name">Object 0</field> -->
+        <!--     <field name="value">0</field> -->
+        <!--   </record> -->
+        <!--  -->
+        <!--   <record id="object1" model="snippet_video_bg.snippet_video_bg"> -->
+        <!--     <field name="name">Object 1</field> -->
+        <!--     <field name="value">10</field> -->
+        <!--   </record> -->
+        <!--  -->
+        <!--   <record id="object2" model="snippet_video_bg.snippet_video_bg"> -->
+        <!--     <field name="name">Object 2</field> -->
+        <!--     <field name="value">20</field> -->
+        <!--   </record> -->
+        <!--  -->
+        <!--   <record id="object3" model="snippet_video_bg.snippet_video_bg"> -->
+        <!--     <field name="name">Object 3</field> -->
+        <!--     <field name="value">30</field> -->
+        <!--   </record> -->
+        <!--  -->
+        <!--   <record id="object4" model="snippet_video_bg.snippet_video_bg"> -->
+        <!--     <field name="name">Object 4</field> -->
+        <!--     <field name="value">40</field> -->
+        <!--   </record> -->
+        <!--  -->
+    </data>
+</odoo>
--- a/snippet_video_bg/models/init.py
+++ b/snippet_video_bg/models/init.py
@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+from . import models
--- a/snippet_video_bg/models/models.py
+++ b/snippet_video_bg/models/models.py
@ -0,0 +1,15 @@
+# -*- coding: utf-8 -*-
+#
+# from odoo import models, fields
+#
+#
+# class WebsiteMapKey(models.Model):
+#     _inherit = 'website'
+#     video_id = fields.Char("Youtube Video Id")
+#
+#
+# class WebsiteMapConfig(models.TransientModel):
+#     _inherit = 'website.config.settings'
+#
+#     video_id = fields.Char(related='website_id.video_id', string="Youtube Video Id",
+#                           help="Paste Youtube VideoId Here")
--- a/snippet_video_bg/security/ir.model.access.csv
+++ b/snippet_video_bg/security/ir.model.access.csv
@ -0,0 +1,2 @@
+id,name,model_id:id,group_id:id,perm_read,perm_write,perm_create,perm_unlink
+access_snippet_video_bg_snippet_video_bg,snippet_video_bg.snippet_video_bg,model_snippet_video_bg_snippet_video_bg,,1,0,0,0
--- a/snippet_video_bg/static/description/add.png
+++ b/snippet_video_bg/static/description/add.png
--- a/snippet_video_bg/static/description/banner.jpg
+++ b/snippet_video_bg/static/description/banner.jpg
--- a/snippet_video_bg/static/description/cybro_logo.png
+++ b/snippet_video_bg/static/description/cybro_logo.png
--- a/snippet_video_bg/static/description/icon.png
+++ b/snippet_video_bg/static/description/icon.png
--- a/snippet_video_bg/static/description/id_prompt.png
+++ b/snippet_video_bg/static/description/id_prompt.png
--- a/snippet_video_bg/static/description/index.html
+++ b/snippet_video_bg/static/description/index.html
@ -0,0 +1,161 @@
+<section class="oe_container oe_dark">
+    <div class="oe_row oe_spaced">
+        <h2 class="oe_slogan">Website Video Background</h2>
+        <h4 class="oe_slogan"><a href="https://www.cybrosys.com">Cybrosys Technologies</a></h4>
+    </div>
+</section>
+<section class="oe_container">
+    <div class="oe_row oe_spaced">
+        <h2 class="oe_slogan" style="color:#875A7B;">Make youtube Video as background on website pages</h2>
+        <h3 class="oe_slogan">
+            Get video id from youtube and add it on website.
+            Eg: https://www.youtube.com/watch?v=uNCr7NdOJgw here uNCr7NdOJgw is your video id.
+         </h3>
+    </div>
+
+    <div class="oe_container oe_dark">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Click on + button on website right corner (available for website editor and designer)</b></h2>
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+						 src="new.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Click on Background Video Button</b></h2>
+
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+                         src="add.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container oe_dark">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>You will get a new Prompt</b></h2>
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+						 src="prompt.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Get youtube video id</b></h2>
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+						 src="youtube_id.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container oe_dark">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Paste youtube id in prompt and continue</b></h2>
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+						 src="id_prompt.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Id get saved as system params</b></h2>
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+						 src="system param.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="oe_container oe_dark">
+        <div class="row mt32 o_animate o_animate_in_children o_animate_offset_min"
+             style="animation-name: none; visibility: hidden; animation-play-state: paused;">
+
+            <div class="col-md-5 col-md-offset-1" style="transition-delay: 0ms;">
+                <h2 class=" mt32 mb16"><b>Preview</b></h2>
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+						 src="prev1.png">
+                </div>
+            </div>
+            <div class="col-md-6" style="transition-delay: 500ms;">
+                <div class=" oe_demo oe_picture  oe_screenshot">
+                    <img style="max-width: 100%;-moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);"
+						 src="prev2.png">
+                </div>
+            </div>
+
+        </div>
+    </div>
+</section>
+<section class="oe_container oe_dark">
+    <h2 class="oe_slogan" style="margin-top:20px;" >Need Any Help?</h2>
+    <div class="oe_slogan" style="margin-top:10px !important;">
+        <div>
+            <a  class="btn btn-primary btn-lg mt8"
+            style="color: #FFFFFF !important;border-radius: 0;" href="https://www.cybrosys.com"><i
+            class="fa fa-envelope"></i> Email </a> <a
+            class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;"
+            href="https://www.cybrosys.com/contact/"><i
+            class="fa fa-phone"></i> Contact Us </a> <a
+            class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;"
+            href="https://www.cybrosys.com/odoo-customization-and-installation/"><i
+            class="fa fa-check-square"></i> Request Customization </a>
+        </div>
+        <br>
+        <img src="cybro_logo.png" style="width: 190px; margin-bottom: 20px;" class="center-block">
+        <div>
+          <a href="https://twitter.com/cybrosys" target="_blank"><i class="fa fa-2x fa-twitter" style="color:white;background: #00a0d1;width:35px;"></i></a></td>
+          <a href="https://www.linkedin.com/company/cybrosys-technologies-pvt-ltd" target="_blank"><i class="fa fa-2x fa-linkedin" style="color:white;background: #31a3d6;width:35px;padding-left: 3px;"></i></a></td>
+          <a href="https://www.facebook.com/cybrosystechnologies" target="_blank"><i class="fa fa-2x fa-facebook" style="color:white;background: #3b5998;width:35px;padding-left: 8px;"></i></a></td>
+          <a href="https://plus.google.com/106641282743045431892/about" target="_blank"><i class="fa fa-2x fa-google-plus" style="color:white;background: #c53c2c;width:35px;padding-left: 3px;"></i></a></td>
+          <a href="https://in.pinterest.com/cybrosys" target="_blank"><i class="fa fa-2x fa-pinterest" style="color:white;background: #ac0f18;width:35px;padding-left: 3px;"></i></a></td>
+        </div>
+    </div>
+</section>
+
--- a/snippet_video_bg/static/description/new.png
+++ b/snippet_video_bg/static/description/new.png
--- a/snippet_video_bg/static/description/prev1.png
+++ b/snippet_video_bg/static/description/prev1.png
--- a/snippet_video_bg/static/description/prev2.png
+++ b/snippet_video_bg/static/description/prev2.png
--- a/snippet_video_bg/static/description/prompt.png
+++ b/snippet_video_bg/static/description/prompt.png
--- a/snippet_video_bg/static/description/system
+++ b/snippet_video_bg/static/description/system
--- a/snippet_video_bg/static/description/youtube_id.png
+++ b/snippet_video_bg/static/description/youtube_id.png
--- a/snippet_video_bg/static/lib/jquery.tubular.1.0.js
+++ b/snippet_video_bg/static/lib/jquery.tubular.1.0.js
@ -0,0 +1,148 @@
+/* jQuery tubular plugin
+|* by Sean McCambridge
+|* http://www.seanmccambridge.com/tubular
+|* version: 1.0
+|* updated: October 1, 2012
+|* since 2010
+|* licensed under the MIT License
+|* Enjoy.
+|* 
+|* Thanks,
+|* Sean */
+
+;(function ($, window) {
+
+    // test for feature support and return if failure
+    
+    // defaults
+    var defaults = {
+        ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
+        videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
+        mute: true,
+        repeat: true,
+        width: $(window).width(),
+        wrapperZIndex: 99,
+        playButtonClass: 'tubular-play',
+        pauseButtonClass: 'tubular-pause',
+        muteButtonClass: 'tubular-mute',
+        volumeUpClass: 'tubular-volume-up',
+        volumeDownClass: 'tubular-volume-down',
+        increaseVolumeBy: 10,
+        start: 0
+    };
+
+    // methods
+
+    var tubular = function(node, options) { // should be called on the wrapper div
+        var options = $.extend({}, defaults, options),
+            $body = $('body') // cache body node
+            $node = $(node); // cache wrapper node
+
+        // build container
+        var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';
+
+        // set up css prereq's, inject tubular container and set up wrapper defaults
+        $('html,body').css({'width': '100%', 'height': '100%'});
+        $body.prepend(tubularContainer);
+        $node.css({position: 'relative', 'z-index': options.wrapperZIndex});
+
+        // set up iframe player, use global scope so YT api can talk
+        window.player;
+        window.onYouTubeIframeAPIReady = function() {
+            player = new YT.Player('tubular-player', {
+                width: options.width,
+                height: Math.ceil(options.width / options.ratio),
+                videoId: options.videoId,
+                playerVars: {
+                    controls: 0,
+                    showinfo: 0,
+                    modestbranding: 1,
+                    wmode: 'transparent'
+                },
+                events: {
+                    'onReady': onPlayerReady,
+                    'onStateChange': onPlayerStateChange
+                }
+            });
+        }
+
+        window.onPlayerReady = function(e) {
+            resize();
+            if (options.mute) e.target.mute();
+            e.target.seekTo(options.start);
+            e.target.playVideo();
+        }
+
+        window.onPlayerStateChange = function(state) {
+            if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
+                player.seekTo(options.start); // restart
+            }
+        }
+
+        // resize handler updates width, height and offset of player after resize/init
+        var resize = function() {
+            var width = $(window).width(),
+                pWidth, // player width, to be defined
+                height = $(window).height(),
+                pHeight, // player height, tbd
+                $tubularPlayer = $('#tubular-player');
+
+            // when screen aspect ratio differs from video, video must center and underlay one dimension
+
+            if (width / options.ratio < height) { // if new video height < window height (gap underneath)
+                pWidth = Math.ceil(height * options.ratio); // get new player width
+                $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
+            } else { // new video width < window width (gap to right)
+                pHeight = Math.ceil(width / options.ratio); // get new player height
+                $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
+            }
+
+        }
+
+        // events
+        $(window).on('resize.tubular', function() {
+            resize();
+        })
+
+        $('body').on('click','.' + options.playButtonClass, function(e) { // play button
+            e.preventDefault();
+            player.playVideo();
+        }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button
+            e.preventDefault();
+            player.pauseVideo();
+        }).on('click', '.' + options.muteButtonClass, function(e) { // mute button
+            e.preventDefault();
+            (player.isMuted()) ? player.unMute() : player.mute();
+        }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button
+            e.preventDefault();
+            var currentVolume = player.getVolume();
+            if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy;
+            player.setVolume(currentVolume - options.increaseVolumeBy);
+        }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button
+            e.preventDefault();
+            if (player.isMuted()) player.unMute(); // if mute is on, unmute
+            var currentVolume = player.getVolume();
+            if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
+            player.setVolume(currentVolume + options.increaseVolumeBy);
+        })
+    }
+
+    // load yt iframe js api
+
+    var tag = document.createElement('script');
+    tag.src = "//www.youtube.com/iframe_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+    // create plugin
+
+    $.fn.tubular = function (options) {
+        return this.each(function () {
+            if (!$.data(this, 'tubular_instantiated')) { // let's only run one
+                $.data(this, 'tubular_instantiated', 
+                tubular(this, options));
+            }
+        });
+    }
+
+})(jQuery, window);
--- a/snippet_video_bg/static/src/js/bg_video.js
+++ b/snippet_video_bg/static/src/js/bg_video.js
@ -0,0 +1,82 @@
+odoo.define('snippet_video_bg.wrapwrap_bg_video', function (require) {
+    'use strict';
+
+    var Dialog = require("web.Dialog");
+    var core = require('web.core');
+    var Widget = require('web.Widget');
+//    var session = require('web.session');
+    var base = require('web_editor.base');
+    var wUtils = require('website.utils');
+    var WebsiteNewMenu = require('website.newMenu');
+    var website = require('website.website');
+
+    var qweb = core.qweb;
+    var _t = core._t;
+    base.url_translations = '/website/translations';
+
+    WebsiteNewMenu.include({
+    	
+        actions: _.extend({}, WebsiteNewMenu.prototype.actions || {}, {
+        	new_bg_video_id: '_NewBgVideo',
+        }),
+        
+        //----------------------------------------------------------------------
+        // Actions
+        //----------------------------------------------------------------------        
+        
+        /**
+         * Asks the video url for new video background
+         *
+         * @private
+         */        
+        _NewBgVideo: function() {
+        	var self = this;
+        	wUtils.prompt({
+                id: "bg_video_id",
+                window_title: _t("Add a YouTube Video Id here"),
+                input: "Video ID",
+            }).then(function (id) {
+//                website.form('/set_video_id', 'POST', {
+//                    id: id
+//                });
+                self._rpc({
+                    route: '/set_video_id',
+                    params: {
+                    	id: id,
+                    },
+                }).then(function (url) {
+                    window.location.href = url;
+                });                
+            });
+        },
+    });
+});
+
+odoo.define('snippet_video_bg.wrapwrap_bg_video_load', function (require) {
+    'use strict';
+    var Dialog = require("web.Dialog");
+    var core = require('web.core');
+    var Widget = require('web.Widget');
+    var session = require('web.session');
+    var base = require('web_editor.base');
+    var Model = require('web.Model');
+
+    var qweb = core.qweb;
+    var _t = core._t;
+    base.url_translations = '/website/translations';
+
+    $('document').ready(function() {
+
+        session.rpc("/get_video_id", {})
+            .done(function(res) {
+                var options = {
+                    videoId: res.video_id || false,
+                    start: 0,
+                    mute: true,
+                };
+                $('#wrapwrap').tubular(options);
+            });
+
+    });
+
+});
--- a/snippet_video_bg/static/src/js/bg_video.js~
+++ b/snippet_video_bg/static/src/js/bg_video.js~
@ -0,0 +1,59 @@
+odoo.define('snippet_video_bg.wrapwrap_bg_video', function (require) {
+    'use strict';
+
+    var ajax = require('web.ajax');
+    var Dialog = require("web.Dialog");
+    var core = require('web.core');
+    var Widget = require('web.Widget');
+//    var session = require('web.session');
+    var base = require('web_editor.base');
+    var contentMenu = require('website.contentMenu');
+
+    var qweb = core.qweb;
+    var _t = core._t;
+    base.url_translations = '/website/translations';
+
+    contentMenu.TopBar.include({
+        new_bg_video_id: function() {
+            website.prompt({
+                id: "bg_video_id",
+                window_title: _t("Add a YouTube Video Id here"),
+                input: "Video ID",
+            }).then(function (id) {
+                website.form('/set_video_id', 'POST', {
+                    id: id
+                });
+            });
+        },
+    });
+});
+
+odoo.define('snippet_video_bg.wrapwrap_bg_video_load', function (require) {
+    'use strict';
+    var ajax = require('web.ajax');
+    var Dialog = require("web.Dialog");
+    var core = require('web.core');
+    var Widget = require('web.Widget');
+    var session = require('web.session');
+    var base = require('web_editor.base');
+    var Model = require('web.Model');
+
+    var qweb = core.qweb;
+    var _t = core._t;
+    base.url_translations = '/website/translations';
+
+    $('document').ready(function() {
+
+        session.rpc("/get_video_id", {})
+            .done(function(res) {
+                var options = {
+                    videoId: res.video_id || false,
+                    start: 0,
+                    mute: true,
+                };
+                $('#wrapwrap').tubular(options);
+            });
+
+    });
+
+});
--- a/snippet_video_bg/views/assets.xml
+++ b/snippet_video_bg/views/assets.xml
@ -0,0 +1,8 @@
+<odoo>
+    <template id="assets_frontend" inherit_id="website.assets_frontend" name="AssetFor Products Quick View">
+      <xpath expr="." position="inside">
+        <script type="text/javascript" src="/snippet_video_bg/static/lib/jquery.tubular.1.0.js"/>
+        <script type="text/javascript" src="/snippet_video_bg/static/src/js/bg_video.js"/>
+      </xpath>
+    </template>
+</odoo>
--- a/snippet_video_bg/views/conf_view.xml
+++ b/snippet_video_bg/views/conf_view.xml
@ -0,0 +1,21 @@
+<odoo>
+  <data>
+    <!--<record id="bg_video_id" model="ir.ui.view">-->
+        <!--<field name="name">Website page Background Video Id</field>-->
+        <!--<field name="model">website.config.settings</field>-->
+        <!--<field name="inherit_id" ref="website.view_website_config_settings"/>-->
+        <!--<field name="arch" type="xml">-->
+            <!--<xpath expr="//group[@name='social']" position="after">-->
+                <!--<group name="map" string="Website page Background Video Id">-->
+                    <!--<label for="map_url" string="Video Id"/>-->
+                        <!--<div>-->
+                            <!--<div id="video_id" class="oe_inline">-->
+                                <!--<field name="video_id" placeholder="Youtube Video Id"/>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                <!--</group>-->
+            <!--</xpath>-->
+        <!--</field>-->
+    <!--</record>-->
+  </data>
+</odoo>
--- a/snippet_video_bg/views/templates.xml
+++ b/snippet_video_bg/views/templates.xml
@ -0,0 +1,11 @@
+<odoo>
+    <data>
+        <template id="content_bg_video_id" inherit_id="website.user_navbar">
+            <xpath expr="//div[@id='o_new_content_menu_choices']//ul" position="inside">
+                <li ><a href="#" data-action="new_bg_video_id">
+                    <i class="fa fa-youtube" aria-hidden="true"/>
+                    <p>Background Video</p></a></li>
+            </xpath>
+        </template>
+    </data>
+</odoo>