diff --git a/addons/website_sale/static/src/js/website_sale_video_field_preview.js b/addons/website_sale/static/src/js/website_sale_video_field_preview.js
index c9641c1bb5c..a1754726861 100644
--- a/addons/website_sale/static/src/js/website_sale_video_field_preview.js
+++ b/addons/website_sale/static/src/js/website_sale_video_field_preview.js
@@ -1,29 +1,10 @@
-odoo.define('website_sale.video_field_preview', function (require) {
-"use strict";
+/** @odoo-module **/
 
+import { registry } from "@web/core/registry";
 
-var AbstractField = require('web.AbstractField');
-var core = require('web.core');
-const {Markup} = require('web.utils');
-var fieldRegistry = require('web.field_registry');
+const { Component }  = owl;
 
-var QWeb = core.qweb;
+export class FieldVideoPreview extends Component {}
+FieldVideoPreview.template = 'website_sale.FieldVideoPreview';
 
-/**
- * Displays preview of the video showcasing product.
- */
-var FieldVideoPreview = AbstractField.extend({
-    className: 'd-block o_field_video_preview',
-
-    _render: function () {
-        this.$el.html(QWeb.render('productVideo', {
-            embedCode: Markup(this.value),
-        }));
-    },
-});
-
-fieldRegistry.add('video_preview', FieldVideoPreview);
-
-return FieldVideoPreview;
-
-});
+registry.category("fields").add("video_preview", FieldVideoPreview);
diff --git a/addons/website_sale/static/src/xml/website_sale.xml b/addons/website_sale/static/src/xml/website_sale.xml
index f1a1c0b5ae4..c1568630485 100644
--- a/addons/website_sale/static/src/xml/website_sale.xml
+++ b/addons/website_sale/static/src/xml/website_sale.xml
@@ -2,9 +2,9 @@
 
 <templates xml:space="preserve">
 
-    <t t-name="productVideo">
-        <div class="ratio ratio-16x9 mt-2" t-if="embedCode">
-            <t t-out="embedCode"/>
+    <t t-name="website_sale.FieldVideoPreview" owl="1">
+        <div class="ratio ratio-16x9 mt-2" t-if="props.value">
+            <t t-out="props.value"/>
         </div>
     </t>