I am developing a web page using Vue.js.
And this site need to show Facebook Live Video.
So I am following facebook document: https://developers.facebook.com/docs/plugins/embedded-video-player#example
It's easy and below code works fine. This code is the same code written in facebook doc.
<v-layout pt-3>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<!-- Your embedded video player code -->
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-show-text="false">
</div>
</v-layout>
...
<script>
export default {
methods: {
addVideo(url) {
this.facebookVideoUrl = url;
}
}
}
</script>
But there is one problem. I want to change the Facebook video dynamically like below.
<v-layout pt-3>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<!-- Your embedded video player code -->
<div class="fb-video" :data-href="videoUrl" data-show-text="false">
</div>
</v-layout>
...
<script>
export default {
methods: {
addVideo(url) {
this.facebookVideoUrl = url;
FB.XFBML.parse(); // I added this line, but it same...
}
}
}
</script>
There is one text field, so the user can change the video URL. Then I should show the new video. But it doesn't work...
The hard coded "data-href" works fine. But when I change it dynamically, it doesn't work.
How can I solve this problem???