I developed the following custom CSS to make every YouTube embed on my site responsive. This is based on a previous How-To by another person. This solution was more suited to my needs though, because I never want statically-sized YouTube embeds. I also added a little bit to make the disabled area divs responsive when editing as well.
.youtubeBlock {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.youtubeBlock iframe,
.youtubeBlock object,
.youtubeBlock embed
{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.ccm-block-edit[data-block-type-handle="youtube"] .ccm-edit-mode-disabled-item {
width:100% !important;
height:0 !important;
padding-bottom: 56.25%;
}
Loading Conversation