Media embed styles (default config) without the resize feature

Editor configured with MediaEmbed + MediaEmbedStyle (no MediaEmbedResize) and the default five-built-in style set. The page stylesheet caps the YouTube figure at max-width: 50%, simulating a scenario where the figure's width comes from outside the resize feature (custom integrator CSS, GeneralHtmlSupport preserving inline styles, custom upcast, etc.). The Spotify embed is unaffected by that rule and demos a different width source: its built-in 300px default.

The selected figure should have a contextual toolbar with Break text and Wrap text dropdowns.

Default centering

  1. The first figure (no alignment class) should be centered horizontally inside the editor content,
  2. The data <figure> should be class="media" only, with no alignment class.

Block alignment shifts the figure even without media_resized

  1. Select the YouTube embed,
  2. From the Break text dropdown, click "Left aligned media": the figure should pin to the left edge of the content area,
  3. The data <figure> should include media-style-block-align-left (no media_resized class, because the resize plugin is not loaded),
  4. Repeat for "Right aligned media": the figure should pin to the right edge,
  5. Click "Centered media": the figure should re-center.

Wrap-text alignment with surrounding text

  1. Select the YouTube embed,
  2. From the Wrap text dropdown, click "Left aligned media": the figure should float left and the paragraph below should wrap around it,
  3. The data <figure> should include media-style-align-left,
  4. Repeat with "Right aligned media": the figure should float right with text wrapping on the left.

Provider with a built-in default width (Spotify)

  1. Select the Spotify embed (300px wide by default),
  2. Apply each block alignment in turn: the figure should shift to the corresponding edge of the content area,
  3. Apply each wrap-text alignment in turn: the figure should float to the corresponding side and surrounding text should wrap around it.

Round-trip

  1. Apply any alignment,
  2. Call editor.getData(): the output should contain only media-style-* classes; no media_resized, no style="width: …" (the resize feature is not loaded).

Example URLs

Test editor

Provider with integrator-side width (YouTube)

Default centering — no alignment class on the figure below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Provider with a built-in default width (Spotify)

Spotify embeds default to a 300px wide figure.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.