YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar designjunkies asked

Any good solution for youtube video in Lightbox?

Hey there,
for a long time now, Im searching for a GOOD way to play my videos in a lightbox.
Since now I used this code here:

<a class="uk-button uk-button-default" href="#modal-center1" uk-toggle>Anschauen</a>
<div id="modal-center1" class="uk-modal-container" uk-modal="center: true">
<div class="uk-modal-dialog">
<button class="uk-modal-close-outside" type="button" uk-close></button>
<iframe width="1280" height="720" uk-responsive src="https://www.youtube.com/embed/inv-yhgcuW4?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

Unfortunately the close button doesnt stop playing the video. First you have to stop, then close...

So i tried this one:

<div uk-lightbox>
<a class="uk-button uk-button-default" href="//www.youtube.com/watch?v=YE7VzlLtp-4" caption="YouTube">YouTube</a>
</div>

Well, the video stops playing when closing the window, BUT: The player doesnt allow me to watch the video in fullscreen and the video is using autoplay. I couldnt find a way to enable fullscreen or disable autoplay...

And there is more! The Lightbox of some videos is really small. Is there a way to integrate height and width?

So what is everyone else using? Am I missing something? :(

  • General Question
  • UIkit
  • YOOtheme Pro

Edited

5 Answers

0

Avatar pedrojsicilia answered

Hi Michael,

In your link there is a Lighbox Gallery (TANGO, EMBRACE and MODERN DANCE) but when you open lightbox, in some of it´s items I only can see a Bolt icon.

Image

Can you check if you can see on your browser?

Thank you very much,

Pedro

Update
Thank you very much for your answer Michael. I´ve opened a new question to not disturb on this one, sorry.

Edited

0

Avatar michael.anlauf Support answered

Only where it says Youtube. It has a reason I linked to this specific page. Thought this was obvious. Special since the other videos are Vimeo and related to a other question.

Edited

0

Avatar designjunkies answered

Hello Michael,
first of all, thank you for your answer! Could you be a bit more specific? Which code put I into a html element?

Thank you!

0

Avatar designjunkies answered

I managed it! Copied the code from your site. But its quite the same as mine... Im using this one now:

<div class="uk-margin">
<a class="el-content uk-button uk-button-primary" uk-toggle="" href="#lightbox1">Anschauen</a>
<div id="lightbox1" class="uk-flex-top uk-modal" uk-modal="">
<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
<button class="uk-modal-close-outside uk-close uk-icon" type="button" uk-close=""></button>
<iframe uk-video="" src="https://www.youtube.com/embed/inv-yhgcuW4?rel=0&amp;controls=1&amp;showinfo=0" uk-responsive="" class="uk-responsive-width" width="1280" height="720" frameborder="0" autoplay="1" allowfullscreen></iframe>
</div>
</div>
</div>

I worked a bit arround and found one of my most issues with lightbox. When I use autoplay="0", the video is still playing after closing the lightbox. When I use autoplay="1", there is no problem with that. So Im still searching for the perfect solution... :(

Know someone who can answer? Share a link to this question via email or twitter.