This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation

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