Skip to content

Youtube embed does not work properly #109

Closed
ballaschk opened this issue Feb 22, 2021 · 8 comments
Closed

Youtube embed does not work properly #109

ballaschk opened this issue Feb 22, 2021 · 8 comments
Labels
bug Something isn't working

Comments

@ballaschk
Copy link
Collaborator

ballaschk commented Feb 22, 2021

I tried to embed https://www.youtube.com/watch?v=GXQs6CAlZK0

Using the "embed" function of the editor, I get the error message "Für diese URL wurde kein Element gefunden." – is the function broken?

Using Youtube's embed code, the video is appearing only as a narrow strip in the rendered page. This seems wrong, too.

There are ways to generate responsive embeds, but they all need the "after" selector in CSS which is not available with inline styles.

As a workaround, I will download the video with youtube-dl and upload it to our own servers.

@ballaschk ballaschk added the bug Something isn't working label Mar 12, 2021
@donald
Copy link
Member

donald commented Mar 20, 2021

I think, we just need to update our wagtail. The YouTube ombed URL in wagtail 2.10 is http://www.youtube.com/oembed . YouTube seems to have switches to https:

buczek@tuxedo:~$ curl "http://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=GXQs6CAlZK0"
{
  "error": {
    "code": 403,
    "message": "SSL is required to perform this operation.",
    "status": "PERMISSION_DENIED"
  }
}
buczek@tuxedo:~$ curl "https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=GXQs6CAlZK0"
{"title":"Impfstoffe gegen COVID-19: Wie sie wirken und was wir von ihnen erwarten k\u00f6nnen","author_name":"Max Planck Institute for Infection Biology","author_url":"https://www.youtube.com/channel/UCI8DU-vDQpnUxaYZoRT-_Rw","type":"video","height":113,"width":200,"version":"1.0","provider_name":"YouTube","provider_url":"https://www.youtube.com/","thumbnail_height":360,"thumbnail_width":480,"thumbnail_url":"https://i.ytimg.com/vi/GXQs6CAlZK0/hqdefault.jpg","html":"\u003ciframe width=\u0022200\u0022 height=\u0022113\u0022 src=\u0022https://www.youtube.com/embed/GXQs6CAlZK0?feature=oembed\u0022 frameborder=\u00220\u0022 allow=\u0022accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\u0022 allowfullscreen\u003e\u003c/iframe\u003e"}buczek@tuxedo:~$ 

wagtail has been updated 1

@donald
Copy link
Member

donald commented Mar 20, 2021

Yes, it works after a Wagtail update.

However, just going to a intranet page with an embedded video (without starting it) produces 17 requests to external servers, including doubleclick.net and sends ad cookies around. Also fonts.gstatic.com is back, which I got rid of before as request in #58. I assume, if you are logged in to Google with your browser, the Intranet page access will be related to your Google account.

Do we want that?

I'll do the Wagtail update anyway (to get to current versions of everything before working on other issues) and this will resolve this problem. But still we should decide, whether we want to use (or possibly disable) the feature. Especially now that we are able to show videos locally.

@pmenzel: Do you want make an argument here?

@donald donald mentioned this issue Mar 20, 2021
@donald
Copy link
Member

donald commented Mar 20, 2021

Works on testserver. Page with embedded youtube video: https://intranet2.molgen.mpg.de/de/service/scientific-service/it/test/

Looks everything else okay on https://intranet2.molgen.mpg.de/ ?

@ballaschk
Copy link
Collaborator Author

Maybe it would be a good idea to use the "youtube-nocookie" URL to prevent that the iframe talks to Google services even before the video is started? This would provide a minimum of privacy. I couldn't find a suitable code snippet that would generate something like a consent form, like it is used on the videos page of Duckduckgo.

The embed looks pretty small here – only a few hundred pixels in size. Would 100% of the width make more sense? (Or maybe 75%, centered?)

But I agree that we should generally avoid using these embeds anyway, I'm not sure about disabling them altogether.

@donald
Copy link
Member

donald commented Mar 24, 2021

I've added a solution for the size problem to #111 , preview on testserver, but you might need to shift-reload the page, your browser might have cached the old style sheet.

Its a bit ulgy (iframe is allway ugly), but I don't think, there is another way. Take it or leave it :-)

@donald
Copy link
Member

donald commented Mar 24, 2021

I tried https://github.com/a-v-l/dsgvo-video-embed and this works, but the page looks so ugly, maybe a plain link would be better.

Anyway, I think the mentioned bug is fixed. The question, whether we want that or whether we even want to disable that, is unrelated. Should I merge the update into the live server?

@ballaschk
Copy link
Collaborator Author

I'd say, go for it. The full-width video looks good & we can take care of the DSGVO stuff another time …

Thank you :)

@donald
Copy link
Member

donald commented Mar 25, 2021

Okay.

  • Wagtail is updated on the main server (Update wagtail #111) so embedded YouTube videos work again with "responsive" layout for videos.
  • You no longer need to shift-reload, I've added cache busting in staticfiles: Switch to ManifestStaticFilesStorage #113 .
  • I've changed the embed url for YouTube videos to a (better) privacy respecting one in embed: Use youtube-nocookie.com #114. No more tracking or session cookies to YouTube. Not perfect, but much better.
  • The embed urls are cached in the database. I flushed the table so that the embed url will be re-fetched and postprocessed to the nocookie variant the next time the page is viewed.

Demo: https://intranet.molgen.mpg.de/de/service/scientific-service/it/test/

I close this issue, I think its fixed.

Sign in to join this conversation on GitHub.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants