This is being made from a comment made on the plugin forum: https://wordpress.org/support/topic/responsive-embeds-2/
I鈥檇 like to see a way to make embedded media (Youtube for example) responsive so that the video player will appear at 100% width on both desktop and mobile. After playing around with the editor, I didn鈥檛 see an easy way to do this aside from going into the code and manually changing the width like how it鈥檚 done in the current WordPress editor.
- misterblockus
karmatosed
All 6 comments
If we include default styles for blocks, we should (in my opinion) have responsive styles (js if we need) for all embeds.
melchoyce
on 24 Jul 2017
https://github.com/WordPress/gutenberg/pull/1921 merged some CSS for responsive videos, can you check if that solves the issue you're seeing? (Most of that PR was to get the videos responsive in the _editor_ though, not on the published post, which operates differently)
notnownikki
on 26 Jul 2017
Closing this, as it's working for me in master per Nicolas changes.
jasmussen
on 4 Aug 2017
for me it works in the editor as stated above but not in the front. can you give advice on how to enable it on the front end?
niklasp
on 23 Nov 2018
I only tried Instagram which was responsive, but YouTube was not on the front end. This worked for me:
.wp-block-embed__wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wp-block-embed__wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
wgoodman
on 10 Dec 2018
I've never experienced such a pain in the ass to style up both back-end and front-end. This is pure disaster. Besides, it's literally impossible to select video EMBED block in Gutenberg. I tried to click on embedded video and all I get is switch between play and pause.
How to explain customers to manage video block while I can't do it by myself either way?!?
dameer
on 16 Dec 2018
Related issues
aduth
路
3Comments
BE-Webdesign
路
3Comments
pfefferle
路
3Comments
moorscode
路
3Comments
cr101
路
3Comments
Most helpful comment
If we include default styles for blocks, we should (in my opinion) have responsive styles (js if we need) for all embeds.