0

I am a complete novice to coding so please excuse my ignorance. I am embedding a video using the tag which everything works as it should. I was wondering if there is a way to have the controls be hidden when the page loads and have them show up when the mouse is hovered over the video; like it does once it is playing. Any way to do this?

Btw: this is being entered into an html content box in a document editor (BEE)

THANK YOU

EDIT: attached are pictures of what it looks like where I can put the code. Again, I have minimal experience with this stuff. It is an html content box in a document editor.

What html box selection looks like Once html box is added to editor

Josh
  • 1
  • 1

1 Answers1

1

Taken from: HTML5 video - show/hide controls programmatically 

<video id="myvideo">
  <source src="path/to/movie.mp4" />
</video>

<p onclick="toggleControls();">Toggle</p>

<script>
var video = document.getElementById("myvideo");

function toggleControls() {
  if (video.hasAttribute("controls")) {
     video.removeAttribute("controls")   
  } else {
     video.setAttribute("controls","controls")   
  }
}
</script>
BragDeal
  • 748
  • 2
  • 10
  • 25
  • I just uploaded a few pics to where the code would go. I pasted it in there and changed the src to my video url but didnt work. any help? TIA – Josh Mar 14 '19 at 23:55
  • What you say it didn't work, what do you see? My guess is that the js part was removed from your editor. Try to put the script tag portion in a place where it allows it to be executed – BragDeal Mar 15 '19 at 01:39
  • It shows everything but if i click on toggle it doesnt play – Josh Mar 15 '19 at 23:18
  • http://jsfiddle.net/dgLds/ it works here so if you copied the code it should work. Do you have the Jquery library linked? – BragDeal Mar 16 '19 at 00:19