0

I'm trying to add & remove some css classes on a div when a Vimeo video is played or paused. Pretty simple idea, when video is playing class '.playing' is added to body tag. When video is paused class '.paused' is added to body and class '.playing' is removed. This works perfectly fine until I add GTM tracking snippets to the start of the head and body tags. The GTM code is the default generated code.

I'm using player.js API. using the functions

player.on('play', function () {
  $('.wrapper').addClass('playing');
  $('.wrapper').removeClass('paused');
});

player.on('pause', function () {
  $('.wrapper').removeClass('playing');
  $('.wrapper').addClass('paused');
});

HTML looking like this

<div class="wrapper">
  <p class="text-playing">Playing</p>
  <p class="text-paused">Paused</p>
</div>

<div id="video"></div>

CSS:

.text-playing,
.text-paused {
   display: none;
   font-size: 20px;
}

.playing .text-playing.
.paused .text-paused {
  display: block;
}

Below is a working pen. If you press the play button and pause a few times you will see it starts to work. Then stops working. If you edit the pen and remove the iframe GTM code after the body and remove the code in the head section and try again and it works fine. Could this have anything to do with the video being in an iframe?

https://codepen.io/alexkodr/pen/rNwwKvP

alexkodr
  • 523
  • 3
  • 7
  • 30
  • works for me just fine with GTM every time. Clicked like 40 times. It's good. The only thing that pains my eye is the usage of jQuery. Please stop. – BNazaruk Sep 14 '21 at 16:26
  • I figured it out in the end. It was an event setup within GTM. I paused it and it worked fine. Just out of interest what is wrong with jQuery? – alexkodr Sep 14 '21 at 18:25
  • It adds a library dependency. Completely unneeded and unjustified. And then when you need to reuse code in a different place where they don't use third party libraries without the need, you have to rewrite it. It's basically a library for beginners, but it ends up doing more harm than good. And then noobs have no idea how to use actual JS properly, having got used to jquery. https://stackoverflow.com/questions/5099949/what-are-some-empirical-technical-reasons-not-to-use-jquery – BNazaruk Sep 15 '21 at 00:24

0 Answers0