decidim-archive / design

⚠️ [DEPRECATED] Design of the Decidim framework
1 stars 3 forks source link

Fix embedded videos styles #146

Open mrcasals opened 7 years ago

mrcasals commented 7 years ago

:tophat: User Story

We're adding the functionality to embed videos through the editor, but once the page is saved the video is shown very small:

(that's 300x150px)

The code generated by the editor (quilljs) is this:

<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/iCQFMr4Wwb0?showinfo=0"></iframe>

The Process show page has an embedded video, but it's surrounded by an .embed-container element. I tried to add this class to the iframe but did not work. Can we have styles for the .ql-video class so that the video gets all the width of the section?

:clipboard: Related documentation

None

:dart: Acceptance criteria

videos embedded through quilljs occupy the whole width of the section.

:pushpin: Related issues

https://github.com/AjuntamentdeBarcelona/decidim/pull/992

mrcasals commented 7 years ago

PR https://github.com/AjuntamentdeBarcelona/decidim/pull/992 (where the embedding feature is added) adds some basic styles, but I guess they should be improved.

htmlboy commented 7 years ago

The same iframe in the decidim-designcode is working as expected, so te problem is the CSS applied in the .ql-video class. Can we remove this class or the conflicting styles in the player CSS?

captura de pantalla 2017-02-17 a las 11 22 00