youtube adds extra embed code
On one of my online forums, we ran into a strange issue with Firefox. We embed videos from Youtube, and the code used to look like this:
<iframe width="854" height="480" src="https://www.youtube.com/embed/ryruBoX-MIc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Now YouTube detects Firefox and the code is:
<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/YrHeQJpCfRk?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
which, as you can see. includes a "div" statement. I confirmed this does not get included with MS Edge. Sometimes it makes the video take up the full width of the window, ignoring the borders set by the forum code. It usually makes the spacing of subsequent lines about 10 lines per - probably that "padding-bottom=56.25%" (Why 56.25?)
Anyway, there's a discussion and examples at : http://www.largescalecentral.com/forums/topic/28322/today-s-youtube-embed-code-may-2018
Funnily, it stopped the full-width today ?? I did not reboot or reload Firefox or anything else - I just close and suspend my laptop overnight. Even more funny - one guy tried it with his Firefox and did not get the "div" version !!
Any "div" experts shed any light on this?
Modified by cor-el
Chosen solution
I'm pretty sure the exact contents that are put on the clipboard are determined by a script on YouTube. Google's scripts are very complex, so I'm not inclined to dive into them myself.
Read this answer in context 👍 0All Replies (8)
Interesting. This forum took the "div" and either did something with it or ignored it - anyway, it doesn't show.
Here's the Youtube embed code in question. I replaced the < with ~.
~div style="position:relative;height:0;padding-bottom:56.25%">~iframe src="https://www.youtube.com/embed/YrHeQJpCfRk?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>~/iframe>~/div>
Hi Fred2179, where is the variation in the embed code coming from?
For example, do you go to a video on YouTube and click the Share button, then the <> Embed button, then copy from there? And you get different code depending on what browser you use?
Or is the problem when you use a "widget" provided by the forum to add the embed code (the widget modifies the code in Firefox but not in other browsers)?
Or does the problem only appear when you edit a post that had an embedded video? There are some references to editing in the thread you linked to.
As the referenced thread describes, I was using standard Youtube practice. Nowadays there isn't always a "share" button - you have to right-click in a video and select "copy embed code."
Now that's interesting. Using the "share" button, then the <> Embed option you get this (< replaced with ~) :
~iframe width="560" height="315" src="https://www.youtube.com/embed/UQF4zp2I6a0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>~/iframe>
but if you right-click and pick "copy embed code" you get this:
~div style="position:relative;height:0;padding-bottom:56.25%">~iframe src="https://www.youtube.com/embed/UQF4zp2I6a0?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>~/iframe>~/div>
Weird.
Sometimes I don't notice things the first few times...
The address in your example has the parameter "ecver=2" on the URL. Mine do not have that.
When I search that, I find threads complaining about how the div is added only when the user is logged into their GSuite account (e.g., Youtube Embed Code Problem - Google Product Forums).
I can't replicate that, as I only have ordinary consumer Google accounts.
I guess if that is the issue in your case, you could launch the video in a private window as a workaround to get a clean embed code while you're viewing the video logged out. That might be faster and more accurate than cleaning up the embed code by hand.
One further clue turned up. Youtube has made changes. Before (3+ months ago?) there was a 'share' button below the video, which took you to a popup with the video URL link, and a tab "Embed" that gave you the embed code, an iframe construct.
Now you get all kinds of things (attached image 1), but the "embed" option still gives you the same code - see attached image 2. But if you right-click and select "copy embed code" (attached image 3) you don't get a window - there is a disturbance in the video center telling you something happened, and when you go to the LSC Embed window, the "ctrl-v" option (paste) does not work but a right-click and 'paste' does. See image 4.
And it is not the same embed code. If you try it with MS Edge, it is the same. So why does Youtube provide something different to Firefox?
Aha, jscher2000, thank you for the google link. Good to know it wasn't just me! I will experiment with logging out - I have several Google accounts.
Yep, it only produced the "div" when using Firefox on one account. Which doesn't explain what Firefox is doing to cause it. Maybe nothing - if I signed in on Edge it might do it? Might be something in the google cookie?
Chosen Solution
I'm pretty sure the exact contents that are put on the clipboard are determined by a script on YouTube. Google's scripts are very complex, so I'm not inclined to dive into them myself.