[Try] Add youtube support in cover block #10708
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR is a proof of concept for the addition of youtube videos as the background of the cover block.
It depends on #10659.
In order to have a flow that allows the insert of youtube videos cover block is updated to allow the addition of files via their URL.
Youtube video background is not perfect when the video ends, we may have a black screen for one second until the loop starts again.
I checked what other tools that support youtube videos as background are doing. It looks like they are using the youtube JavaScript API, and they are not using the loop functionality the API offers but instead they set a timer for the duration of the video and when the timer ends they use the API to put the video again at the second zero. Even though this solution is not totally perfect sometimes it is possible to notice a black screen but the duration is smaller when compared to our approach, so this approach provides a better UX.
I think we are on the limit of what is possible to do with an iframe if we want to reduce the black screen between start and end we will need the API with the go-to second 0 "hack" like others are doing.
This raises some questions:
- Should we have a block in the core that requires custom javascript on the frontend?
- Should we have a block in the core that includes javascript from a third party (youtube) that we have no control over?
How has this been tested?
I added the cover block.
I checked that I can add youtube videos as the background of the cover.
I checked I can still upload or select an image or video from the media library as the background of the cover block.
I checked I can insert an image or video as a background using its URL (the domain must be a site where we are testing or a third-party that allows Ajax requests required to check if the URL is a video or an image).