I’m embedding Facebook videos in my Angular project using the Facebook Embed code. However, I’m seeing suggested videos appear at the end of the video or when I pause the video. Here is an example of the embedded video:
here we can see suggestion videos appear
Is there a way to hide or remove these suggested videos?
Here is the current code I’m using to embed the Facebook video:
HTML code
<div #videoContainer id="myIframe" class="fb-video" data-href="https://www.facebook.com/facebook/videos/1173373513689916/" data-width="500" data-show-text="false" data-width="500"
data-show-text="false"
data-autoplay="true"
data-allowfullscreen="true"
data-controls="true"
data-show-captions="false"
data-show-post="false"
data-show-social-context="false"
data-show-metadata="false"
data-show-adaptive-playback="false"
data-autoplay-metadata="false"></div>
TS code
import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
declare var FB: any;
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
// @Input() videoUrl: string;
@ViewChild('videoContainer') videoContainer!: ElementRef;
private myVideoPlayer: any;
ngAfterViewInit() {
this.initializeFB();
}
initializeFB() {
const initParams: any = {
appId: '317808808064170',
xfbml: true,
version: 'v20.0'
};
FB.init(initParams);
FB.Event.subscribe('xfbml.ready', (msg: any) => {
console.log(msg,'msg')
if (msg.type === 'video') {
this.myVideoPlayer = msg.instance;
this.myVideoPlayer.play();
this.myVideoPlayer.subscribe('startedPlaying', () => {
console.log('Video started playing');
});
this.myVideoPlayer.subscribe('paused', () => {
console.log('Video not playing');
// this.restartVideo()
});
this.myVideoPlayer.subscribe('finishedPlaying', () => {
console.log('Video finished playing',this.myVideoPlayer);
this.restartVideo()
});
}
});
FB.XFBML.parse();
}
restartVideo() {
if (this.myVideoPlayer) {
console.log(this.myVideoPlayer,"video",'vid')
this.seekTo(0);
this.myVideoPlayer.seek(0); // Seek to the beginning of the video
this.myVideoPlayer.play(); // Play the video
}
}
seekTo(seconds: number) {
if (this.myVideoPlayer) {
this.myVideoPlayer.seek(seconds);
}
}
}
I have tried looking through the Facebook Embed documentation but couldn’t find a way to disable the suggested videos. Any help would be appreciated.
Thanks!
I was expecting to find a way to hide or remove the suggested videos that appear at the end or when the video is paused. I don’t want these suggestions to be displayed at all.
discussion forall is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.