How to Make Youtube Playlist embed responsive?

[laazrockit]

Hi guys,

I'm embedding a youtube playlist into an embed code box on my weebly site. However I can't make it responsive and it cuts in half when I view it on the mobile preview.

Is there any code to add to the html which will make it responsive so it can be viewed properly on a mobile?

[Adam7]

What code are you embedding, and on what page of your site, @laazrockit? It's usually easiest to figure out when you can see it in action.

[laazrockit]

Thanks for the reply. It's the code youtube gave me to embed a playlist. I've pasted the code into an embed code box on a standard weebly page and as you can see from the screenshots below, it displays fine on desktop but is cut on a mobile.

 Link to the page on my site: https://theclassicheavymetalvault.weebly.com/thrash-metal.html

[Adam7 · Accepted solution]

You could try something like this:

https://www.ostraining.com/blog/coding/responsive-videos/

The only thing you'd need to do is take the CSS code from the last steps, wrap it in style tags, and add that to Settings > SEO > Header code, e.g.

<style>
	.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
	}
	.video-responsive iframe{
	    left:0;
	    top:0;
	    height:100%;
	    width:100%;
	    position:absolute;
	}
</style>

[laazrockit]

It's worked! Thanks so much