Video in modal

Your’r right…

Https://Blocs.pt

2 Likes

Use this link for now, sorry…

https://blocs.pt/examples/wolfganghofer/

1 Like

Hey man, great, it works!
Thanks for your time!
Wolfgang

@pelco I tried a few places adding your code in page preferences but can’t see to get to shutdown the video on toggle close modal. Where exactly does it go in page preferences?

Thanks for your help…

Not Found

The requested URL /examples/wolfganghofer/ was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

sorry, please use this link:

http://blocs.pt/a_examples/wolfganghofer/

1 Like

@Pealco
I see the following error in my code but don’t see this in the link you provided…

Any idea how to fix this… Thanks

change $(function(){ to:
document.addEventListener("DOMContentLoaded", function() {

Test it please?!?!

@Pealco That worked perfectly…

Thanks

Just to let others know, I was also able to use the video in modal technique on my web site in an image carousel. I defined a number of images in my carousel to have a button in the caption area to invoke the modal. To make a simple window to display the videos (YouTube using the Video bric), I disabled the header, footer, and close btn modal options. I also gave the modal a black background to simplify the look even more.

Some issues I ran into. I had to use the 2nd form of the script function given above by Pealco before it would work. I also needed to disable the Lazy Load project setting because the video would sometimes lock up with a black screen if I cancelled viewing the video by clicking outside of the modal window, then immediately re-vieweing the same video by clicking the modal button again. Once I disabled Lazy Load, this problem seemed to go away.

Anyway, I really like how this video in modal capability looks in the image carousel on my web site. Thanks to Pealco and Eagle for providing the info needed to make this work. :slight_smile:

2 Likes

I’m having the same problem and cannot resolve it. I’ve looked through the posts here and tried some of the code–I still have audio after I close the Modal. I am working with the latest build of the software. My video is being pulled from Vimeo.

Also, a few of the links in this page seem to be dead. So, I didn’t have those resources.

Thanks in advance.

This works for me with youTube videos:

<script>
document.addEventListener("DOMContentLoaded", function() {
  $("body").on('hidden.bs.modal', function (e) {
    var $iframes = $(e.target).find("iframe");
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});
</script>
1 Like

Worked like a charm! Thank you.

1 Like

It works but … have you guys noticed that when you try to open 2nd time the same video, you get only popup with white background and no video at all?

edit: yeah, un-ticking ‘lazy load’ during export did a job, it’s all good :wink:

3 Likes

Just been reading all this for a project I am looking at and want a video from Vimeo or Youtube to open in a modal.

Or anyone found an easier or simpler way since all the recent updates?

I am sure @PeteSharp was working on a bric for something like this?

1 Like

Hi all,

I have managed to get a video’s audio to stop, once I close the modal (which has been embedded from Vimeo). But I can not see how to stop the audio from when its added Local / Remote when I close the video the audio still plays.

Also I have selected rom Vimeo’s settings for the video to Autoplay from the embedded code - but in the modal, this does not autoplay - is there any code to have this autoplay if anyone knows - thanks all.

Is there ANY reason this bug is not fixed from THREE years ago??? WHY do we have to use a script and WHERE does it go in Blocs v4.1.1??

Blocs 4.2.1 has a new function that will help to remedy this scenario.

Originally I was planning on writing up a knowledge base post covering the various solutions (using custom code), however, I have come up with a small piece of code that I think is a good fit, considering it works on all videos and iframes.

The only downside is it does not pause the video, it stops it and resets the video back to the start. But considering it works in pretty much all scenarios, I’ve added it to the core Blocs.js file.

Hopefully this with help you and many others who are not well versed in implemented additional code in Blocs.

8 Likes

This is really good news.
I’m ready for testing.

1 Like

Fantastic news! By the way, I noticed that the Preview button in the Brics Store does this exact same thing … a video in a modal :slight_smile: