Question 44739 in Html Question posted in
Some basic documentation can be found here.

Video or iframe tag not working properly when binding it's src – Html

I have a website where I’m binding the video or iframe tag to the youtube link I’m getting from API. It only works properly when I’m not binding the link.

This is how it is looking enter image description here

This is what i want enter image description here
I’m using vuejs 2.

This is the code I have. I’m looping over the data I’m getting from API. This code is working fine if I’m using the link directly in src without binding it’s value.

<div
    class="gallery-hover-wrap"
    data-aos="fade-up"
    v-for="(item, index) in gallerydata"
    :key="index"
>
    <img
      v-if="item.image"
      :src="item.image"
      style="width: 100%"
      @click="OpenGalleryPopFun(item)"
      class="itemimg"
    />
    <div v-if="item.video_link">
      <iframe :src="item.video_link" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
      </iframe>
      <!-- <video
        no-controls=""
        muted="muted"
        autoplay="autoplay"
        loop="loop"
      >
        <source src="https://www.youtube.com/watch?v=YklfuduwIGk" type="video/mp4" />
      </video> -->
    </div>
</div>
Tags:

2

Answers


  1. 0

    Try this:

    <video :key="item.video_link" no-controls="" muted="muted" autoplay="autoplay" loop="loop">
  <source :src="item.video_link" type="video/mp4" />
</video>
    Login or Signup to reply.
  2. 0

    From the look of your image, it seems that your video url are broken.

    Instead of using https://www.youtube.com/watch?v=YklfuduwIGk try using an embed link https://www.youtube.com/embed/YklfuduwIGk

    This might fix your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search