We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

How to stop an iframe video when I click on a div?

Home › Forums › Programming › How to stop an iframe video when I click on a div?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • 2021-03-02 at 9:09 am #39014
    ellepucci
    Participant

    Hello! I’m new to code and I don’t know how to do this.
    Little background to make you easier to understand:

    I’m working on a project where when I hover on a 3D object, it glows and if you click it, an iframe inside a div pops up.
    Inside this div there is a vimeo video embedded.
    With the div (with the iframe inside) it appears even an “X” button so you can close the video.

    Everything works fine, but when I click on the “X” button, if the video is not paused, the video continues to play.

    I searched on the web some solutions, but nothing seem to work.

    Any idea?

    In the attachment you can see the html code and the puzzle used..

    Attachments:
    You must be logged in to view attached files.
    2021-03-02 at 6:22 pm #39057
    visualizer
    Customer

    Hi
    Developer team

    Even I have experienced the similar difficulty. Especially when I put youtube or any video link to annotations.
    User has to pause or stop the video and then click on the annotation to close video, else even though video window is closed the video keeps playing in background ( sound of video can be heard ) till you again go to video and stop/pause it.

    2021-03-02 at 6:24 pm #39058
    visualizer
    Customer

    Again,
    Similarly I had asked a question some time ago that,
    When we click annotation the video generally appears on RH bottom side of annotation…. Can that position be adjusted? OR can such provision be given so that, video can be zoomed in from center of that annotation OR may be center bottom etc. ?

    Cheers

    2021-03-02 at 8:23 pm #39063
    Crunch
    Customer

    There is the easy way and the hard way.

    The easy (hack) way to get a video in iframe to stop playing after you hide it, is to change the SRC property of the iframe at the same time of your hide event to something else, like a static image with your logo on it.

    The hard (proper) way would be to use the vimeo api
    https://player.vimeo.com/api/demo

    Create a separate html file, paste the vimeo embed code there and create a vimeo player object.

    Create an iframe in verge and set the SRC to the html file you just created.

    Add your control buttons use the execute javascript puzzle to target the iframe and then the vimeo player object, and control it how you want.

    I just used play() and pause() functions in example here but there are more features available via vimeo api

    https://developer.vimeo.com/player/sdk/reference#events-for-chapters

    Unfortunately, to get this all working you need to make sure everything is loading from your own domain AND you have an SSL certificate installed.

    To my knowledge, the Verge server environment doesn’t provide an SSL cert so what I do is have a xampp local server (i have it setup so the root directory is my verge applications directory) running which does have an SSL cert installed.

    To get an SSL cert installed on your local server you can try this guide

    How to Create Valid SSL in localhost for XAMPP

    Good luck

    Attachments:
    You must be logged in to view attached files.
    2021-03-02 at 8:37 pm #39066
    Crunch
    Customer

    Oh there is another way to get vimeo vids into your verge. If you follow the video-texture example that ships with Verge3d, you can modify puzzles so the video texture links direct to your vimeo video.

    I have the vimeo pro version so not sure this is available in all versions, but see the screen shot to where you can find direct links.

    Note – using direct links like this circumvents any privacy settings you may have on your vimeo account. If someone has the link, they can download the file. Fyi.

    Attachments:
    You must be logged in to view attached files.
    2021-03-03 at 4:59 am #39072
    zjbcool
    Customer

    Hi, all
    I think embedding the Youtube/Vimeo video as a real 3D object into the Verge3D scene is a good idea. You may take a look at the css3d plugin, easy to use. :yes: :yes: :yes:

    https://zjbcool.com/ | Gumroad | Twitter | YouTube | Bilibili

    2021-03-03 at 11:43 am #39086
    ellepucci
    Participant
    Crunch wrote:

    There is the easy way and the hard way.

    The easy (hack) way to get a video in iframe to stop playing after you hide it, is to change the SRC property of the iframe at the same time of your hide event to something else, like a static image with your logo on it.

    The hard (proper) way would be to use the vimeo api
    https://player.vimeo.com/api/demo

    Good luck

    Thank you so much for the explanation.
    I tryed to use the simple version and it works, but unfortunatly is a 1 time thing and I need to be able to rewatch it.

    I tryed to make a function linked to the close button (X) that change the src video code to an image, and then i created a function for the open objects that change the image back to the src video code, but I can’t make it work.

    *I make some changes while writing this and my *temporary* solution is this:

    Made a function for close button (X) – it works as you suggested
    Instead of the group of objects I tryed to link the function (image back to src video code) to a reload button (R) and it works!

    Thank you! Is a temporary solution but it’s perfect for the presentation I have

    Some example in the attachment if someone need help :)

    Attachments:
    You must be logged in to view attached files.
    2021-03-03 at 12:37 pm #39092
    ellepucci
    Participant
    visualizer wrote:

    Hi
    Developer team

    Even I have experienced the similar difficulty. Especially when I put youtube or any video link to annotations.
    User has to pause or stop the video and then click on the annotation to close video, else even though video window is closed the video keeps playing in background ( sound of video can be heard ) till you again go to video and stop/pause it.

    Don’t know if what I did is useful to you because I did not put my video inside the annotation itself (in my work the annotation is only to mark some interactive elements).
    I created a div where I put my iframe and then I styled my video with code (traditional code) and puzzle.
    In this way my video appear at the center of the page and the video is centered in the div I created.

    In the attachment I leave u my coding. Don’t know if it’s efficient and the correct way, but this worked for me. :)

    Attachments:
    You must be logged in to view attached files.
    2021-05-23 at 7:04 pm #41274
    jdhutchinson
    Customer

    Hello,

    I too am trying to stop an iframe by amending the src property during application use.

    Can anyone explain why this would not work for me using the set prop puzzle? Is there something more advanced as a wrokaround that is needed?

    2021-05-29 at 3:45 pm #41569
    troskhy
    Customer
    ellepucci wrote:
    Crunch wrote:

    There is the easy way and the hard way.

    The easy (hack) way to get a video in iframe to stop playing after you hide it, is to change the SRC property of the iframe at the same time of your hide event to something else, like a static image with your logo on it.

    The hard (proper) way would be to use the vimeo api
    https://player.vimeo.com/api/demo

    Good luck

    Thank you so much for the explanation.
    I tryed to use the simple version and it works, but unfortunatly is a 1 time thing and I need to be able to rewatch it.

    I tryed to make a function linked to the close button (X) that change the src video code to an image, and then i created a function for the open objects that change the image back to the src video code, but I can’t make it work.

    *I make some changes while writing this and my *temporary* solution is this:

    Made a function for close button (X) – it works as you suggested
    Instead of the group of objects I tryed to link the function (image back to src video code) to a reload button (R) and it works!

    Thank you! Is a temporary solution but it’s perfect for the presentation I have

    Some example in the attachment if someone need help :)

    Hi @ellepucci… i tried your method and worked for me partially… i’m able to load the popup window with a vimeo video inside, but when i press the close button (i removed the reload option), only the video dissapears and the window persists in the screen… can you tell me how to hide the popup window also?

    That would help me a lot!!!

    Thanks in advance,
    Troskhy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.