No longer works for youtube videos

[MarioDena]

As of today with the default settings for github pages youtube videos break the markup.

[nathancy]

Could you provide more details and a minimum reproducible example? The embed Youtube video on the demo page seems to still be working

[MarioDena]

Hello, It does work as long as you don't insert any linked links. This problem is presented on both github pages and up-to-date jekyll.

If you use markdown to place linked links your links will be parsed as raw text.

EDIT: Haven't tested for inline style links

[xeTaiz]

I had an issue with the template containing the following:
src="..../embed/{{ include.id }}"
changing to
{{include.id}} without spaces solved my issue

[nathancy]

So the fix was changing

src="..../embed/{{ include.id }}"

to

src="..../embed/{{include.id}}"

Does anyone know a reason why that fixes it? If it seems to work, I'll patch it in

[inetbiz]

What about CORS restrictions in chrome? Access to video at 'https://drive.google.com/file/d/1wDyOec7bTNsLnoPRsTzEmwTU1i6r4wb-/view' reduce-visual-assets-filesize.html:1 from origin 'https://denverprophit.us' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

htaccess

Header set Access-Control-Allow-Origin: *
Header set X-Frame-Options SAMEORIGIN
Header always set Referrer-Policy "strict-origin-when-cross-origin"
Header always edit Set-Cookie (.*) "$1; SameSite=secure"
Header set Accept-Language: en-US,en;q=0.5
Header set Content-Language "en-US"
Header set Connection keep-alive
ServerSignature email
SetEnv TZ {{timezone}}
DefaultLanguage en-US
AddDefaultCharset UTF-8
AddEncoding x-compress .Z
AddEncoding x-gzip .gz .tgz
SetEnv SERVER_ADMIN {{webmaster}}

Header Response

HTTP/1.1 200 OK =>
Date => Thu, 29 Oct 2020 18:14:04 GMT
Server => Apache
Referrer-Policy => strict-origin-when-cross-origin
Upgrade => h2,h2c
Connection => keep-alive, close
Last-Modified => Thu, 29 Oct 2020 17:57:14 GMT
Accept-Ranges => bytes
Content-Length => 19454
Cache-Control => max-age=600, private, must-revalidate
Expires => Sat, 28 Nov 2020 18:14:04 GMT
Vary => Accept-Encoding,User-Agent
Access-Control-Allow-Origin => *
Access-Control-Allow-Credentials => false
X-Frame-Options => SAMEORIGIN
Accept-Language => en-US,en;q=0.5
Content-Language => en-US
Content-Type => text/html; charset=UTF-8

Chrome Devtools

[nathancy]

Sorry I've never encountered that CORS error. My guess is that you haven't turned on link sharing for your Google drive video. Take a look at the embed Google Drive section.

[inetbiz]

@nathancy had already done that.

[Matticusau]

In my case the issue seems to be that the id is not being carried forward into the generated HTML

This was because i was trying to pass the id directly in the include line but had not quoted the id. Such as {% include youtubePlayer.html id="XXXXXXXXXXXX" %}

[Penworks]

Update for new readers

This works for YouTube as of November 2023.

In case its relevant, if you have several videos on the same page you can use the following method

Front matter

youtubeId: xxxxxxxx
youtubeId1: xxxxxxxx
youtubeId2: xxxxxxxx

Embed include:

{% include youtubeplayer.html id=page.youtubeId %}
{% include youtubeplayer.html id=page.youtubeId1 %}
{% include youtubeplayer.html id=page.youtubeId2 %}

The above method can be used for Vimeo player too. I haven't tested other players/hosts.

• In my opinion, using the page.youtubeId method is preferable to placing the Id in the include script.

• Also, I did remove the whitespace around the embed Id code in youtubeplayer.md, but I'm not sure that made any difference.

• FYI, you can use a href links in your page as well, it makes no difference to how this addon works.