Add Youtube or similar video service using an embed URL in the background of the Cover block

[paaljoachim]

This question came up in the Core Editor Slack channel from

JosVelasco Are there any plans to support YouTube videos as a background for the cover block?

---

I did not find an issue for it, so I am adding one here.

Associated Cover block issue: https://github.com/WordPress/gutenberg/issues/28643 and the overview issue here: https://github.com/WordPress/gutenberg/issues/28385

@critterverse and @mtias

[bph]

That would be wonderful. I remember the days a YouTube URL could be added to the default theme TwentySeventeen header via the Customizer.

https://user-images.githubusercontent.com/39980/107374043-2b1edd80-6ab5-11eb-96e7-1da53571cd40.mp4

[paaljoachim]

Another request for adding a video service (Youtube) URL to the background of the Cover block. https://wordpress.org/support/topic/cover-background-video-url/

NB! The following information is from the above request link.

Cover background can be set as color or upload image or video

I have a dedicated server but I don’t like the idea to upload video in media for performance reason. That might be even worse for user with a shared server.

I generally load on Youtube as “Unlisted” and get the URL to use it as background Example on Section from Getwid

Is it possible to consider to have an option of background Youtube URL for cover ? Best would be to have Youtube and Vimeo.

---

I added the below as I too feel that this would be very helpful!

[amandablum]

another vote for this function.

[annezazu]

This came up as part of the FSE Outreach Program's All Things Media exploration - consider it another vote!

When I was trying to add a video background to the cover block, I kept wanting to be able to add a video through a link (like how you can add an image through a URL), my thought was: I can grab a youtube URL and paste that in, and the video will just autoplay without sound in the background. As a dev, I know the complexity of providing that, but as a user that’s immediately where my head went, and I spent almost 10 minutes thinking, “I though this was a thing? Am I crazy? Why isn’t this a thing?”

[DennysDionigi]

This is so frustrating. And also please note that "video src" is not even fully html5 compliant, as the source is missing. So any fallbacks is not even a point here. There are so many video codecs, some goes well on iOS, other for Android, even other only on desktop as well. Hard forcing the video cover to stream from 1 source is really a bad, bad practice.

[randomburner]

Another vote for this, Youtube and also for Vimeo embed.

[ivcreative]

One more vote here for this to add Youtube and Vimeo to cover

[badlydrawnben]

Another vote for this - streaming video from your server is far from ideal for most sites on low-cost hosting setups.

[mammothsolutions]

My team told me this theme was good to start moving to for improving site speed as the theme we have been using is causing some issues. We are building our first client site with Blocks and the one area where speed is a real issue (video) it seems Blocks provides the worst possible options for adding the video by limiting to hosting the video file directly on the server, which we all should know by now causes real performance issues and video should be embedded via URL and hosted on a streaming platform. I'm pumping the brakes on moving to this theme as I'm even more surprised how long this has been a known issue with no movement even with paid support.

Our only solution/workaround was to add another plugin - https://wordpress.org/plugins/advanced-backgrounds/

[miriamardent]

Any update on this? I'm desperate for this - modern times need hosted videos as backgrounds all the time!

[paaljoachim]

Regarding: https://github.com/WordPress/gutenberg/issues/49273#issuecomment-1528967005

It might be possible to add an URL to the new Media control which was just added to the Site Logo block in the newest Gutenberg plugin.

The above shows a new Media panel. In the Site logo block clicking it opens the Media Library. We could instead click "Add media" and have it show a drop down of options something similar to:

It would make it possible Open Media Library, Upload (image, gif, video etc), Embed URL etc.

[kblizeck]

Upvote here for Vimeo

[losbenos]

Really surprised to find that this isn't available. Now the two minute job I had planned to start with will be a couple of hours trying to find an alternative to WordPress core. 1 more vote for video in the cover block.

[LetterAfterZ]

+1 for this one. Tried to hack in my own version, but it breaks the focus point preview.

[scrybbler]

Surprised that this functionality didn't occur to the Gutenbergians during initial implementation.

[pkarjala]

Adding my support to this discussion.

What problem does this address?

Currently all media used in the background of a Cover block must be uploaded to the site. This does not work well for content that is data-intensive, such as video files. A large number of visitors to a site can quickly eat up bandwidth quotas. Even taking the time to properly encode and make videos have as small of a footprint as possible does not completely alleviate the issue. Additionally, not all servers are well configured for serving video content, which can tax resources usually only allocated for serving text and images.

What is your proposed solution?

Allow videos to be embedded from external sources in the background of Cover blocks. An example to start with would be media hosted on YouTube. Currently all that is desired is to add the embed code of the applicable media with settings such as described at https://developers.google.com/youtube/player_parameters.

This is what we used to do with the classic editor and using manual embed codes, but we are unable to do this with the blocks editor due to the inability to add external media for Cover blocks.

---

Seeing as this issue has been around for three years and seems to have support, it would be good to see this kind of remote media support added into Cover blocks.