Want to show the video by jquery but click event doesn't work

I am trying to show an video by using click event, but the click event doesn’t trigger.

Here is the code:

<div id="video-section">
    <div class="radial-progress">
        <div class="r-circle">
            <div class="mask full">
                <div class="fill"></div>
            </div>
            <div class="mask half">
                <div class="fill"></div>
                <div class="fill fix"></div>
            </div>
        </div>
        <div class="inset">
            <i class="fa fa-caret-right"></i>
        </div>
    </div>
    <iframe src="//player.vimeo.com/video/92371445"></iframe>
</div>  <!-- end video-section -->

And this is my jquery codes

$('#video-section .radial-progress').on('click', function() {
  $('#video-section > iframe').show();
});

You can see my live example here, it doesn’t works for showing video.

My first question would be: Are you sure the video isn’t loading/playing on page load, instead of on click?

My next question: Are there any error messages appearing in F12 developer tools?

EDIT: Does the iframe have dimensions? (Height, width)

:slight_smile:

Hi @WolfShade

In my codepen, it still working but I don’t know why it doesn’t work on my page. You can check my page here

Updated: I fixed myself. What happened is when I put the code in the last js file, there is another js get errors so it can’t load this code. I also added a little code to make it play when play button is clicked.

2 Likes

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