Problem with youtube on netlify

[torvenkat]

When I try to embed a YouTube video on my site deployed at Netlify, I see a blank iframe. Please see https://bilahari.netlify.app/blog/improving-sleep-quality/

As I could see the video properly embedded in my local build, I tried troubleshooting this with Netlify settings. I could not get further. Then I tried testing this with another Hugo theme and it properly displays the videos on Netlify builds. So, this should be specific to this theme (and not a problem with Netlify or Youtube permissions). I used the standard Youtube shortcode to embed. I also tried with iframe embed code.

I am also getting similar error when I try to include a Spotify playlist. There must be some security settings that blanks out the contents of iframe.

Will appreciate any pointer to change the settings to allow these. Thanks.

[jollydodo]

Well it is not a problem with the theme. Check your console and you can see several errors that are all related to the content security policy (CSP). "Refused to load https://www.youtube.com/embed/lRp5AC9W_F8 because it appears in neither the frame-src directive nor the default-src directive of the Content Security Policy." The other themes that you use must not use a CSP (which is less safe). You can easily google how to fix this one. Although, it is my personal opinion that you should not embed YouTube videos on your website. Youtube doesn't respect the privacy of your visitors. If you still decide to do so, I would suggest using the YouTube privacy enhanced mode (it says enough that they have one...). I personally created a shortcode that uses huge image processing to make a thumbnail of an image with a YouTube svg icon over it which then links directly to Youtube (so that my users are at least not tracked on my website and can decide themselves if they want to watch the video).

For Spotify the same things apply. You need to specifically set external sources in the CSP so that they are basically allowed to load scripts/content on your website. ;) (Your CSP policy is located in the Netlify.toml file)

1 other thing: I notice that your search is not working (see console error). I had the same issue and this is related to a new update in flexsearch. I went back to 7.31, but that might not be the fix. Another solution/issue is discussed here: thuliteio/doks-core#84

[torvenkat]

Thanks for the pointers. Your idea of linking to youtube seems good. Will it be possible for you to share the shortcode?

[jollydodo]

Sure! You can save this file as html file and put it in your shortcode folder (check the code to see how to use it. It is pretty basic). It simply takes the YouTube link, looks for the thumbnail path, resizes this image to a webp in 1360x765 similar to the default doks implementation and then puts an svg over it that looks like a YouTube play button. Don't forget to also add the scss to your custom scss.

youtube-button.txt
youtube-button-css.txt