How to display video data in vue.js template

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