Responsive sizing about lite-youtube-embed HOT 5 CLOSED

@Stanzilla @paulirish simply commenting out this line in source allowed my lite-youtube-embed's to work perfectly in my particular layout. I attempted to override that style in my own stylesheet loaded afterwards with:

lite-youtube {
    max-width: none !important;
}

or

lite-youtube {
    max-width: 100% !important;
}

but neither solution worked and the embed was still limited to 750px.

for now i will run lite-youtube-embed with the commented out source line 9 indicated above.

from lite-youtube-embed.

hmmmm... i don't see a reason why lite-youtube { max-width: none !important;} wouldn't work. it should.

i added this style not too long ago because it was HUGE on my test pages. and that seemed wasteful.

but i agree if someone can't clear that max-width then we have problems.

from lite-youtube-embed.

I was able to override lite-youtube { max-width: ... } without any problem.

Still, I agree with @Stanzilla that a video embed should have 100% width by default. I think that would be a better developer experience.

What about changing those test pages so that the embeds are inside a small container?

from lite-youtube-embed.

If using tailwindcss, you can use !max-w-full class on the lite-youtube component to make it responsive

from lite-youtube-embed.

Still, I agree with @Stanzilla that a video embed should have 100% width by default.

The youtube iframe doesn't do 100% width by default. Therefore this drop-in replacement won't.

The solution to this is a basic style:

lite-youtube {
  max-width: unset;
}

from lite-youtube-embed.