How to disable clicking on embedded video?

JavaScript
1

Hi everyone,

I’ve got the following video embed code on my page and I want to disable my visitors from clicking on the video… how do I do it simply & effectively with HTML/CSS/Javascript? Tks!

<script src="https://fast.wistia.com/embed/medias/XXXYYY.jsonp" async=""></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:66.56% 0 0 0;position:relative;">
  <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
    <div class="wistia_embed wistia_async_XXXYYY videoFoam=true" style="height:100%;width:100%">&nbsp;</div>
  </div>
</div>
2

Hi Cesar, the only problem I see with your HTML is that the video node doesn’t have an id or a class that properly identifies it so I suggest, if you have control over the HTML that you add one… otherwise you may select it like in the commented line although I suggest not doing this as it would be more error prone. Alternatively you could add an onclick attribute like in the second example… hope it helps

var videoNode = document.getElementById('myVideo');
// var videoNode = document.querySelector('.wistia_responsive_padding');
if (videoNode) {
  videoNode.addEventListener('click', function(event){
    event.preventDefault();
  });
}

<div onclick="event.preventDefault(); return false;" class="wistia_responsive_padding" style="padding:66.56% 0 0 0;position:relative;" >
3

This sounds an awful lot like you want to play a video and prevent the user from pausing/stopping it, or adjusting the volume. If this is the case, why would you want to force this upon a user? You’ll most likely only drive them away.

V/r,

^ _ ^

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.