let script = document.createElement('script');
script.src = "https://www.youtube.com/iframe_api";
document.head.appendChild(script);
But I’m not sure if it works with Drive videos. I want to pause them when changing slides. Using getElementById only gets the iframe, not a player object to control. Is there a way to pause these Drive videos with JavaScript? Or does the YouTube API not work here? Any tips would be great!
I’ve actually had some success controlling Google Drive embedded videos, but it’s not straightforward. The YouTube API doesn’t work directly, but there’s a workaround.
You can use the postMessage API to communicate with the iframe. A basic approach involves setting up a message event listener, sending a postMessage to the iframe with a pause command, and then handling the response to control playback.
Keep in mind this method is not as smooth as the YouTube API and may break if Google changes their embed structure. If possible, consider hosting videos on a platform with better API support, like Vimeo.
I’ve dealt with a similar situation in one of my projects. Unfortunately, the YouTube Player API doesn’t work directly with Google Drive embedded videos. While they may look similar, they use different underlying systems.
For Google Drive videos, you’ll need to use the Google Drive API instead. It’s a bit more complex to set up, but it does allow for some video control. You’ll need to authorize your app and use the files.get method to retrieve video metadata.
Alternatively, you could consider hosting your videos on YouTube (even as unlisted) and embedding them from there. This would allow you to use the YouTube Player API as intended, giving you full control over playback.
If you must use Drive, you might need to explore custom solutions using postMessage to communicate with the iframe. It’s not ideal, but it can work in some cases.