YT Controls Not Working

  • Resolved mlr4948

    (@mlr4948)


    2 weeks, 4 days ago

    I have noticed that the YouTube player controls are inactive for some videos embedded in my blog posts. Users are unable to interact with the videos as intended. For context, I am using the Gutenberg editor in WordPress, along with Elementor Pro, to format my blog posts. The problem occurs inconsistently across various posts especially where I have embedded multiple YouTube videos in a single post. If I deactivate Elementor Pro, the videos behave normally.

    I would greatly appreciate your assistance in resolving this issue. Thank you!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Phi Phan

    (@mr2p)

    Hi @mlr4948,

    Thank you for reporting this issue. Based on my multiple tests on your site, I did not see this issue. It is really hard to fix it if I cannot reproduce it on my end. Could you please take the time to reproduce it and share the steps with me? From a technical aspect, this block triggers the play event with JavaScript, so I suspect that in some page loads, there is a JS error preventing the play button from being triggered. When you see the error, please open the console in your browser and check for any JS errors.

    Best, Phi.

    Thread Starter mlr4948

    (@mlr4948)

    Thank you, Phi. I could find no JS errors thrown.

    Here is a page with ten embedded videos. If you scroll down to Fantasy Creatures (no. 6) and click ‘play,’ the video will play with all controls activated. If you scroll to Fashion Sketches (no. 7) and click ‘play,’ the controls are inactivated and do not respond. Although the big play button in the center starts and stops the video, the timeline and volume buttons do not work. Again, I think this is a conflict with Elementor Pro. Strangely, the previous embeds work normally. Thoughts?

    https://www.drawing-ideas.art/10-easy-drawing-ideas-to-beat-boredom/

    • This reply was modified 2 weeks, 3 days ago by mlr4948.
    Plugin Author Phi Phan

    (@mr2p)

    @mlr4948 I tested five times both on Chrome and Edge for Windows. They all worked well for me. However, the heading below the videos overlays the bottom part of the videos, you should fix it by removing the margin-top:-145px on the .wp-block-heading selector.

    Thread Starter mlr4948

    (@mlr4948)

    @mr2p Good to know. i’m working under MacOs but will now test Windows and other platforms. Thank you!

    Plugin Author Phi Phan

    (@mr2p)

    @mlr4948 Ah, in my tests, the videos play well, however the controls is overlaid by the heading below, which is why they are inactive and do not respond. You should remove the margin-top:-145px in the .wp-block-heading selector. That CSS rule will cause a lot of issues not just for YouTube videos. It has nothing to do with Windows or Mac.

    Thread Starter mlr4948

    (@mlr4948)

    @mr2p I removed the CSS rule, and now all the controls are active and clickable again. However, I need to find a different method to position the TOC text anchors so they don’t get hidden behind the sticky header. Alternatively, I could unstick the header from this layout. Thanks for troubleshooting this! By the way, the plugin is fantastic!

    Plugin Author Phi Phan

    (@mr2p)

    @mlr4948 You’re welcome! By the way, if you don’t mind and have the time, please give it a review and rating to help it grow.

    Thank you! Have a nice day!

    Phi.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.