How to make video embed responsive?

[Eyemonster]

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.

[yevhen]

Please try this CSS snippet

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

[Eyemonster]

@yevhen

@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?

[yevhen]

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

Screenshot

[Eyemonster]

Thank you, it appears to work correctly now.

[Eyemonster]

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.

[Eyemonster]

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%;
    }	
}

[yevhen]

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%;
    }	
}