3D FlipBook - Vimeo videos do not pause when page turns

Hi, I am using Vimeo for hosting the videos. I can embed them fine using the code.

css
.centre-page {
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
}
iframe {
    border: 0;
}

html
iframe class ="centre-page"  src="https://player.vimeo.com/video/670786612?autoplay=1" width="960" height="846" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>/iframe

js
function init(jContainer) {
    console.log(jContainer);
    console.log('init');
    return {set of callbacks
            hide: function() {console.log('hide');};
            hidden: function() {console.log('hidden');};
            show: function() {console.log('show');};
            shown: function() {console.log('shown');};
            dispose: function() {console.log('dispose');}
        };
    }; init

But the videos do not pause when the flipbook page is turned.

The Youtube test that I did works fine, but using a lot less code.

css

vid1 {
        width: 850px;
        height: 480px;
        position: absolute;
        top: 800px;
        left: 100px;
      }

html
div class="vid1 youtube play-on-shown pause-on-hide" data-id="PWcGrx4CZz8">/div

Can you pause the videos on page turn using a vimeo video, if yes how?