DCzajkowski/vue-pure-lightbox

load youtube video too

Closed this issue · 5 comments

nikola-pavlovic commented

It would be gread if we could load both youtube videos and images in the same lightbox...
any chance?
:)

DCzajkowski commented

Hi! It may be a good idea actually, to make the img to be an optional slot. I'll work on that and let you know how it went 😉 Expect a PR today 😊

DCzajkowski commented

Ok, so I've created a new version 2.1.7 and it now supports a scoped slot for any content type.

Usage:

<lightbox
  thumbnail="http://via.placeholder.com/350x150"
  :images="[
    'http://placekitten.com/1080/910',
    'http://placekitten.com/1080/920',
    'https://www.youtube.com/embed/dQw4w9WgXcQ',
  ]"
>
  <lightbox-default-loader slot="loader"></lightbox-default-loader>
  <div slot="content" slot-scope="{ url }">
    <iframe
      v-if="url.includes('youtube') || url.includes('youtu.be')"
      :src="url"
      frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
      style="width: 100%; height: 90vh;"
    ></iframe>
    <img v-else :src="url">
  </div>
</lightbox>
nikola-pavlovic commented

I get this in console:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.youtube.com/embed/dQw4w9WgXcQ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

DCzajkowski commented

It is working for me (link). Make sure you are loading a new 2.1.7 version.

  • 👍1
nikola-pavlovic commented

...forgot to update ver