Embed a YouTube video using the Static Site Editor
Problem to solve
The Static Site Editor doesn't support embedded video in the WYSIWYG view, a very common element in static sites of all types.
User experience goal
A user should be able to add a YouTube embed from the WYSIWYG mode of the Static Site Editor.
- A user should see a video icon in the formatting bar of the WYSIWYG editor
- Clicking the video icon allows the user to provide a YouTube embed link
- After providing the link, a properly-formatted
<iframe>is added at the user's cursor
- For this iteration, the WYSIWYG editor will only display the generated code, rather than a thumbnail
We should look to the GitLab Handbook style guide for implementation details and remain consistent with the formatting outlined there. For YouTube videos, what that means is that we'd likely prompt the user for a single URL and then use it to build the proper
<figure class="video_container"> <iframe src="https://www.youtube.com/embed/enMumwvLAug" frameborder="0" allowfullscreen="true"> </iframe> </figure> <!-- blank line -->
Note The same format can be used for non-YouTube video links, but not for direct HTML5 uploads. The scope of this issue is only to support linking to videos hosted in an
Permissions and Security
Availability & Testing
What does success look like, and how can we measure that?
- User can paste a YouTube video link into the editor and render a thumbnail in the WYSIWYG editor.
- Since this is embedded in an iframe anyway, would the WYSIWYG editor be able to actually embed the video, allowing playback within the editor itself? This would be desirable, since it ensures that the video is linked properly.