CODEWITHSUNDEEP
responsive-designyoutube
Abby Scott
Abby Scott

Reputation: 1

How to make Youtube video responsive for mobile but NOT fullscreen on desktop

Apologies if this has been asked before, I found similar but not exactly what I'm looking for.

I've found various online tools to embed a responsive Youtube video, however in doing so, it makes them huge on desktop (as it's set to 100% I think and taking up the whole screen).

I found a piece of code that apparently fixes this problem here https://forum.freecodecamp.org/t/help-resizing-embed-youtube-video-with-css/210568 but am unsure where that code fits into what I have so far (i'm a complete novice with code).

Would someone be able to help and provide me with the full piece of code I will need (I only have access to the HTML), so that I can just slot in the youtube link?)

Thanks in advance!

Upvotes: 0

Views: 2113

Answers (1)

user
user

Reputation: 1070

You can make a YouTube Embed responsive with min and max width and height mentioned in the CSS. You can edit the code as per your needs and I do not know why Stack Overflow is not running the code, you can save it and run it manually.
As:

<iframe class="yt" src="https://www.youtube.com/embed/668nUCeBHyY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<style>
    .yt{
    width: 100%;
    min-width:200;
    max-width:800;
    height: auto;
    min-height:400;
    }
</style>

Upvotes: 3

Related Questions