How to display video data in vue.js template

Question

I am saving media(video) file as part of my data collected form ckeditor5 media option which works just fine. On requesting the same saved media file in another page I am unable to display it. How would I display this media(video) data

The data is stored together with the html tags generated form ckeditor, hence on the template I am using v-html to display the other content such as <p></p>,<h1></h1> etc but the video file is not being displayed.

On querying the data this is it's format

"<figure class=\"media\"><oembed url=\"https:\/\/www.youtube.com\/watch?v=OZo_NsIFIdU\"><\/oembed><\/figure>"

This is what i am having problem displaying using v-html ...any ideas?Thanks in advance.

Answer 1

Well after trying out a number of ways i was able to display the video by formatting a number of things using the js .replace() function.More about this function can be found here.

• The <oembed></oembed> tags to <ifame></iframe> tags
• url part of the video to src
• In the video url replace the part from watch?v= to embed

In vue js you can achieve this by making a function under the methods property for formatting the url.An example is as follows:

methods:{
  modifyUrl(url) {
      let endpoint = url;
      endpoint = endpoint.replace('oembed', 'iframe');
      endpoint = endpoint.replace('url', 'src');
      endpoint = endpoint.replace('watch?v=', 'embed/');
      endpoint = endpoint.replace('oembed', 'iframe');
      return endpoint;
    },
}

With this a video url such as <figure class="media"><oembed url="https://www.youtube.com/watch?v=3PX0brdmsWE"></oembed></figure> will be transformed to <figure class="media"><iframe src="https://www.youtube.com/embed/3PX0brdmsWE"></iframe></figure>

The transformed url now can be viewed in the html section using vue.js v-html