angular-youtube-lite
The youtube iframe will stretch to fill your container's width size
Assume you have defined your video container:

.custom-youtube-container {
    width: 50%;
}
                
100%
50%

<div class="custom-youtube-container">
    <youtube video-id="zYcZC-rcYrc"></youtube>
</div>
                                

<div class="custom-youtube-container">
    <youtube playlist="zYcZC-rcYrc,rAIXE6ilRQ0" hide-logo="true"></youtube>
</div>
                                

<div class="custom-youtube-container">
    <youtube video-id="zYcZC-rcYrc" related-video="false"></youtube>
</div>
                                

<div class="custom-youtube-container">
    <youtube playlist-id="PL590L5WQmH8d7mHIqkUxpDQzYYif3c7xW"></youtube>
</div>
                                

Commonly Used Parameters

Name Description DefaultValue Type
video-id Youtube video's ID None String
playlist List of Youtube video's IDs, separated by commas None String
playlist-id Youtube playlist's ID None String
hide-logo Hide Youtube logo on embedded iframe False Boolean
color Color theme of Youtube iframe, available values: ["white","red"] "red" String
autoplay Autoplay video when the youtube player loaded False Boolean

Rarely Used Parameters

Name Description DefaultValue Type
turn-cc-on If turn-cc-on="true", turn on CC when video start palying,
else, use user's reference settings on Youtube
False Boolean
related-video If related-video="false",
Youtube iframe doesn't show related video when video ends.
True Boolean