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.

Intended users

• Parker (Product Manager)
• Presley (Product Designer)

User experience goal

A user should be able to add a YouTube embed from the WYSIWYG mode of the Static Site Editor.

Proposal

• 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

Details

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 <iframe> implementation.

User Input: https://www.youtube.com/embed/enMumwvLAug

Output:

<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 <iframe>

Permissions and Security

TBD

Documentation

Availability & Testing

What does success look like, and how can we measure that?

Acceptance criteria

1. User can paste a YouTube video link into the editor and render a thumbnail in the WYSIWYG editor.

Open questions

• 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.

Links / references