diff --git a/addons/mail/static/src/components/call_participant_video/call_participant_video.js b/addons/mail/static/src/components/call_participant_video/call_participant_video.js
index 59be9ba604d..d953e00f1d6 100644
--- a/addons/mail/static/src/components/call_participant_video/call_participant_video.js
+++ b/addons/mail/static/src/components/call_participant_video/call_participant_video.js
@@ -1,6 +1,7 @@
 /** @odoo-module **/
 
-import { useUpdate } from '@mail/component_hooks/use_update';
+import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
+import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
 const { Component } = owl;
@@ -12,7 +13,8 @@ export class CallParticipantVideo extends Component {
      */
     setup() {
         super.setup();
-        useUpdate({ func: () => this._update() });
+        useComponentToModel({ fieldName: 'component' });
+        useUpdateToModel({ methodName: 'onComponentUpdate' });
     }
 
     //--------------------------------------------------------------------------
@@ -26,32 +28,6 @@ export class CallParticipantVideo extends Component {
         return this.props.record;
     }
 
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    _update() {
-        this._loadVideo();
-    }
-
-    /**
-     * Since it is not possible to directly put a mediaStreamObject as the src
-     * or src-object of the template, the video src is manually inserted into
-     * the DOM.
-     *
-     */
-    _loadVideo() {
-        if (!this.root.el) {
-            return;
-        }
-        if (!this.callParticipantVideoView.rtcSession || !this.callParticipantVideoView.rtcSession.videoStream) {
-            this.root.el.srcObject = undefined;
-        } else {
-            this.root.el.srcObject = this.callParticipantVideoView.rtcSession.videoStream;
-        }
-        this.root.el.load();
-    }
-
 }
 
 Object.assign(CallParticipantVideo, {
diff --git a/addons/mail/static/src/models/call_participant_video_view.js b/addons/mail/static/src/models/call_participant_video_view.js
index f74ca8d154b..677efd1a1f1 100644
--- a/addons/mail/static/src/models/call_participant_video_view.js
+++ b/addons/mail/static/src/models/call_participant_video_view.js
@@ -1,12 +1,28 @@
 /** @odoo-module **/
 
 import { registerModel } from '@mail/model/model_core';
-import { one } from '@mail/model/model_field';
+import { attr, one } from '@mail/model/model_field';
 import { clear } from '@mail/model/model_field_command';
 
 registerModel({
     name: 'CallParticipantVideoView',
     recordMethods: {
+        /**
+         * Since it is not possible to directly put a mediaStreamObject as the src
+         * or src-object of the template, the video src is manually inserted into
+         * the DOM.
+         */
+        onComponentUpdate() {
+            if (!this.component.root.el) {
+                return;
+            }
+            if (!this.rtcSession || !this.rtcSession.videoStream) {
+                this.component.root.el.srcObject = undefined;
+            } else {
+                this.component.root.el.srcObject = this.rtcSession.videoStream;
+            }
+            this.component.root.el.load();
+        },
         /**
          * Plays the video as some browsers may not support or block autoplay.
          *
@@ -30,6 +46,7 @@ registerModel({
             identifying: true,
             inverse: 'callParticipantVideoView',
         }),
+        component: attr(),
         rtcSession: one('RtcSession', {
             compute() {
                 if (this.callParticipantCardOwner.rtcSession) {