The site has a slider that displays a video coming from a supporter of services ( YouTube , vimeo ), loaded into the iframe . I need to scroll the slider on my mobile device using touch . The event when scrolling through the iframe area does not naturally occur. Question: if you block the iframe transparent block that will respond to touch , is it possible to somehow transmit the click event inside the iframe to start and stop the video. Or is it unrealistic and you have to implement the arrows on the slider to scroll?

    1 answer 1

    Suppose a block that overlaps a video has a class .curtain , and the video itself is placed in a block with id=video .

    Then this code will send a command to start the video.

     $('.curtain').click( function() { var iframe = $('#video iframe'); $(iframe)[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*'); } );

    It is only necessary to keep in mind that in order for the YouTube API to work, the link to the video in the iframe should look like this:

    https://www.youtube.com/embed/код-вашего-видео?enablejsapi=1&wmode=transparent

    More about the start / pause video can be read in this answer .