Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Youtube Video dynamic resizing with CSS only
/* Rest unchanged */
return (
<div className='video-container'>
<div className="video">
<iframe className='video-player' src={embedUrl} frameBorder='0'
allow='autoplay; encrypted-media' allowFullScreen title='video' />
</div>
</div>
);
.video-container {
position: relative;
width: 100%;
&:before {
content: "";
display: block;
padding-top: 56.25%; // 9 / 16 in percent
}
.video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
.video-player {
min-height: 480px;
width: 100%;
height: 100%;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.