1 year ago

Vue is not rendering youtube video correctly

Posted 1 year ago by nhayder

on DB i have page URL for a youtube video i need to embed dynamically on the page, I'm using a package that will convert youtube page URL to iframe object, the package is doing its job so there is no issues with that but vue is not being able to render the iframe object on the page.

this is how i'm doing it, Using axios i posting the page URL to laravel end point where the package will return the iframe, this is my component


      <div @click="requestEmbedManager" v-html="media" class="w-full trans cursor-pointer"></div>

export default {

  props: ['widget', 'wIndex', 'contIndex', 'contID', 'controller'],

  name: 'embed-media',

  data () {

    return {

        media  : '',




        var url = this.widget.embed;

        axios.post('api/widget/getEmbedMedia', {

            source : url,


        .then(function (response) {

            console.log('From component =>'+response.data);

            this.media = response.data;


        .catch(function (error) {

            return '/media/default/brokenmedia.png';







it looks like my code is not rendering the iframe object to the page?

can anybody see a problem with my implementation ????

Please sign in or create an account to participate in this conversation.