Youtube player API issue with default video embed (embedly, CORS?)

Hi,

I’m trying to capture events from a youtube video eg to record if a user clicked play or how much they played etc

Normally this can be done with an existing youtube iframe as per code here

however Webflow doesn’t embed the youtube iframe directly. it embeds an embedly iframe that then embeds the youtube iframe

I have trouble even referencing the youtube iframe

var $embedly = $('.embedly-embed')[0]
var $embedPlayer = $embedly.contents().find('#player') // this gives error: $embedly.contents() is not a function
var var contentWindow = $embedly.contentWindow // this gives CORS error

is the only way for this to work is skip the embedly embed and put in my own embed code block for the video?

thanks
J.

Yes. That would be the way forward.

Hi

thanks Jeff, at least I have a starting point now.

because of this issue though I don’t seem to be able to bind the Video Link (URL) in my template:

Instead, I’m going to try and put in a normal video embed onto my page but run JS code in my header to remove the embedly iframe from the DOM and inject a new video player based on the original src, before the iframe has chance to load the src.

(Essentially I still want content editors to be able to see the Video Link preview thumb in the CMS field, which they can’t do if I swapped it out to a plain text URL to fix the mapping)

thanks
J.