Skip to main content
rickg1949
rickg1949
Known Participant
January 29, 2018
Question

Transparent button over video background

  • January 29, 2018
  • 2 replies
  • 2261 views

Is it possible to overlay buttons over top of the MP4 video component in an HTML5 canvas project?  When I tried they were hidden underneath. Even though on top in timeline.

Trying to create a video player with looping background and when user touches screen anywhere timeline goes to menu.  (the old Encore DVD days, I know )

thanks in advance, rg

This topic has been closed for replies.

2 replies

B
brellakc
Participant
February 1, 2018

You can put the canvas over the video.

Create a video-under.css file, then link that css file to your project.

  #canvas{

      z-index: 1;

  }

  #ID_OF_VIDEO{

      z-index: 100;

  }

Replace "ID_OF_VIDEO" with the instance name you give the video component on stage.

Good Luck!

M
marjantrajkovski
Inspiring
February 1, 2018

it will be fine just

#dom_overlay_container {

     z-index: -1;

}

and transparent canvas background

R
rbarnabas
Participating Frequently
October 18, 2022

but where exactly do you place this code? can anyone spare more details on this process for a noob!

 

#dom_overlay_container {

     z-index: -1;

}

Colin Holgate
Colin Holgate
Inspiring
January 29, 2018

The easiest solution might be to also use an HTML5 component for the button. Then it should stay on top of the video. You might also be able to put the listener on to the video component, and have no button.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices