How to make video embed responsive?

I have a “Youtube Video” attribute and have selected “embed” field type. It works when inserting a URL, however, it is not responsive to the window and runs off the page.

Please try this CSS snippet

@media screen and (max-width: 74.99em){
	.hp-template--listing-view-page .hp-listing__attribute iframe{
	    width: 100%;
    }	
}

Thank you. Placed it into the additional css field, does not appear to work yet. I wonder if this might require the attribute itself to have some sort of video wrapper class?

Please try to refresh the cache. It was tested locally and seems to be ok

Thank you, it appears to work correctly now.

Actually, it works on the item’s listing page but not on the page which shows all the listings in a category. There, it’s still running outside the column.


It is working on all pages now. I had my coder work on it, here is the css she inserted before yours (at bottom).

.hp-block.hp-listing__attributes.hp-listing__attributes--secondary .hp-col-lg-6 iframe{
	width:100%;
}
.hp-block.hp-listing__attributes.hp-listing__attributes--secondary .hp-col-lg-6:first-child .hp-listing__attribute--youtube-video {
    padding-bottom: 10px;
}
@media screen and (max-width: 74.99em){
	.hp-template--listing-view-page .hp-listing__attribute iframe{
	    width: 100%;
    }	
}

Please try this CSS snippet for listings blocks. Class hp-block may affect not only listings blocks

@media screen and (max-width: 74.99em){
	.hp-listing--view-block .hp-listing__attribute iframe{
	    width: 100%;
    }	
}