No announcement yet.

Add a video and play it as a pop up

  • Filter
  • Time
  • Show
Clear All
new posts

  • Add a video and play it as a pop up

    Hi all,
    I am new to this forum and in HTML in general.

    I have my website and I need to add videos in my portfolio page.
    What I want to do is this:
    Have several small thumbnails (images) which when the viewer clicks on each one
    to have the appropriate video play BUT in a pop-up window, with the controls (play-Pause, time etc)
    and maybe a small X button on a top corner to close that.
    That video MUST play on top of the portfolio page and not open another Tab or window.

    All the videos and thumbnails will be loaded from the server the website is on and not embedded from another
    like Youtube, Vimeo etc.

    Could someone help on how to achieve that?


  • #2
    Hi there srfval,

    and a warm welcome to these forums.

    Can you supply links to your videos and their corresponding thumbnails?

    I will then be able to supply some code - ( possibly ).

    ~ the original bald headed old fart ~


    • #3
      Hi coothead!

      Unfortunately I cannot give yet any videos because I must watermark them first
      according to my client!

      Anyway, Lets say that I have in my website a folder with 3 videos and 3 thumbnail png's. I want to put on a page those 3 thumbnails and when the user clicks on them to pop up a video player which will play back the appropriate video.
      1.png -> 1.mp4
      2.png -> 2.mp4 e.t.c.

      My weakness is to make this a pop up over the same page...

      Any help much appreciated!


      • #4
        Hi there srfval,

        then I will have to make an example for you to adapt to your purposes.

        ~ the original bald headed old fart ~


        • #5
          yes please!!! Thank you, thank you, THANK YOU!!!


          • #6

            ...give me an hour then.

            ~ the original bald headed old fart ~


            • #7
              Hi there srfval,

              check out the attachment to see an example.

              I am sorry that the videos may be rather boring.
              Attached Files

              ~ the original bald headed old fart ~


              • #8
                Thank you!
                That seems to be what I need!
                I will give it a more thorough look and get back to you!