Video needs transparent background page

I need videos to each open in a new page, over the top of my portfolio site.

Preferably, they would open page center, and if possible, only be the size of the video display.
If the close button would also function, that would be great.

I have saved this with the “Make Background Transparent” selected, but this does not produce the desired effect.

thank you for any help - this is just for my learning and there is no hurry.
Bob - bobnzach@yahoo.com

)video.zip (2.3 MB)

http://echo-boy.com/video/video.html

You should clarify what you mean by new page. If you mean a new browser window I would advise against it. Even worse would be a chromeless browser “pop up” that is size and positioned used JS. This was/is used by the old ad industry and is nowadays often blocked by adblocker etc. further more it isn’t Mobil friendly.
I’d rather suggested a so called overlay or modal also sometimes loosely called a light box.

Wow - thank you for responding.

I would trust your judgement as to which way to go on this, but I must say up front that my coding skills are extremely limited. Which would you suggest - overlay or light box, and is this something that is reasonably easy to do?

Again, my intent is to have a row of thumbnail buttons on my site that would each open a video over the site, (but hopefully with the site still visible.)

thank/this is just a learning site and not an emergency.
Bob

Hi Bob!

Attached are (2) Hype projects:

Video_in_Rect.hype.zip (1.1 MB)

Multi-Videos_inRect_JHSv1.hype.zip (775.5 KB)

"Video_in_Rect" uses your Demo video… a single video that auto plays (as per your example). This video is contained in a rectangle element (called “Video Holder” in the demo) that uses a video tag (in the rectangle’s innerHTML) to display the video. You do not drag and drop the video on to the Scene window with this method.

Video tag code in the “Video Holder” rectangle:

<video id="videoHolder_01" width="100%" height="100%" autoplay="true" poster="${resourcesFolderName}/videoPoster_01.jpg">
  <source src="${resourcesFolderName}/TV.mp4" type="video/mp4">
</video>


"Multi-Videos_inRect_JHSv1.hype" uses the same idea but allows (2) buttons to select/play the corresponding videos in the same rectangle element. We could have more than just (2) buttons and the buttons could be thumbnails instead of buttons.

21%20AM



No doubt You will have questions - but please review these two Hype project files to see if we are headed in the right direction with this approach before I get into any detail.

Jim - thank you.
Sorry I’ve taken so long to respond. As mentioned, this as a learning site and I’m not in any hurry.

I think the second example (Multi-Videos_inRect_JHSv1.hype) will work well for what I have in mind.
I will play with it for a while and definitely get back in touch if I have any additional questions.

Thanks again
( and also for the help you had given me last summer )
Bob M
bobnzach@yahoo.com

1 Like