To replicate:

  1. a video is embedded (could be something other than video, only video was tested) via wysiwyg editor
  2. AND an alignment is selected (left, right, or center)

Video does not display on page after save.

Problem:

  • The code is rendered properly in HTML.
  • The only difference in rendered html is this code:

    <article class="embedded-entity align-left">
    vs
    <article class="embedded-entity">

  • The CSS class "align-left" in align.module.css is
    .align-left {
        float: left;
    }
  • CHANGING the CSS to add a width (percentage, pixel) reveals the video on the page.

Random thoughts:

  • The parent div of an image embed takes the width from the image, and all floats correctly. Note that you can select the size of an image embed. In CSS, the 'img' class is given a max width of 100%.
  • The parent div of a video embed appears to ignore the iframe width, and there is no max-width set on anything within the parent div.

Comments

mariagwyn created an issue. See original summary.

mariagwyn’s picture

Title: Video embed aligned to left, center, or right does not display due to CSS float » Video embed aligned to left, center, or right does not display due missing width
balsama’s picture

phenaproxima’s picture

Project: Lightning » Lightning Media
Version: 8.x-3.001 » 8.x-2.x-dev
Component: Media » Code
oknate’s picture