(Tested on Chrome browser, Windows 11)
Good news, everyone! My first log-in in a few weeks here revealed that the iFrame component for desktop web development (where you’re using the desktop web preview) works at long last for embedding YouTube videos – and presumably other services, but haven’t tested yet. As someone who’s been waiting for this for years on desktop, I figured, might as well spread the method.
-
Install the Inline Frame component from the AG Marketplace.
-
Drag onto editor canvas.
-
Go into the iFrame’s height/width section under the Layout tab and set general dimensions of 560px Width and 315px Height.
-
Go to the YouTube video of choice and click the Share button.
-
In the resulting popup, select Embed. (The direct copy link is not usable, and neither is the link in the browser address bar.)
-
All you need is the URL in between both red points in the image below, sans the quotation marks. It does not seem to work with the full embed code. As for how to get the URL, on my browser, it selects all the embed code when trying to highlight just the URL, so I quickly paste the whole code blob/ into the browser web address bar and then highlight and copy out the required link.
-
Paste it into the src field of your iFrame.
-
Save and open up the web preview. Savor that it finally works on web and wonder if may also work for embedded ads as a monetization methods.
Thank the team that, despite extreme progress slowdowns with AG, still supports it on the dev side. Also, note that video’s audio, captions, and even full-screen is supported out of the box.
To save you some time, here’s examples of the same URL that you can plug in to test yourself.
Embed URL (no cookie stored): https://www.youtube-nocookie.com/embed/ZPX3L44TdS4
Embed URL (standard cookie): https://www.youtube.com/embed/ZPX3L44TdS4
Address bar URL (does not work): https://www.youtube.com/watch?v=ZPX3L44TdS4
Direct-copy URL from Share popup (does not work): https://youtu.be/ZPX3L44TdS4
So you may have realized that forcing an actual platform user to cut out a very specific URL slice from the embed code is not exactly efficient or user-friendly. You’ll also notice the only difference between the embed URL (works) and the address bar URL (does not work) is “embed/” versus “watch?v=”. Methinks that, either on the backend, a process could be written to convert all address bar links to the embedded version in code – or that a similar process could be written on the frontend in Appgyver.
To be clear, in my case, I’m specifically referring to a small social media site where a user can compose a post, click a YouTube icon to have a text input pop up, paste their URL, have it saved in a backend database column as that post’s YouTube URL, have it called back to an Appgyver-built website with a GET API call, its existence in turn determining the visibility of a YouTube iFrame component – which is technically present in all repeated posts on said user’s profile page, but invisible by default.
So we’d want the end user to just be able to copy their generic address bar YT link and have it converted on either side to the compatible embed link. Got a few ideas already, but if anyone finds a good solution with AG formula code or so, feel free to drop it in! Things to think about.
Cheerio now.