Docs

[Maksim V]

Hi guys,
Thank you for your awesome work! Eagerly waiting for the V5 to come out 🙂

Here is a question:
I have an Embedded Video Cornerstone element on my page. The parent column has Enable Fade Effect set to “On”. Embedded YouTube video is set to autoplay.
Can you help me with some jQuery to start the video only after the Fade effect fires (e.g. when a user scrolls down and the column with the Embedded Video element becomes visible) and then pause it whenever user scrolls the video out of a viewport?

Here is the link for the page in question:
http://five.pictures/reconnection

And here is the HTML for the Embedded Video:
<iframe id="playerA" width="1280" height="720" src="https://www.youtube.com/embed/OmKh6x23qX8?list=PLh3o17jb8wfevaGgrF89LpUXCXFSXy54V&rel=0&modestbranding=1&showinfo=0&color=white&&enablejsapi=1&autoplay=0" frameborder="0" allowfullscreen></iframe>
I have No Container set to “On”.

[Rupok]

Hi there,

Thanks for writing in! It’s not possible since you can’t control the start of the video with script since it will load through iframe. You should not use fade-in effect if you use autoplay.

Cheers!

[Maksim V]

Thank you for the quick reply!
I don’t mind loading the video via <div> or via the script all together.

Basically, I need to play/pause the video when it is scrolled into/out of viewport..
I’ve tried something like https://jsfiddle.net/kmsdev/gsfkL6xL/ It kind of works, but the playback interrupts/jitters during the actual scroll. I recon it has to be done in a more X Theme – friendly way.

Can you point me in the right direction?

[Rad]

Hi there,

That’s not possible with youtube embed code. Please add a self-hosted video with video player element then we can start testing it with video’s stop(), play() and setInterval().

And please provide your admin login credentials in private reply.

Thanks!

[Author]

Posts