Full width Youtube embed with React.js — Responsive embed

Image for post
Image for post
Youtube embed which is not responsive :(

In this article, you will learn how to make a react component that you can use to make a responsive youtube embed react component.

Once you embed your first youtube video, you quickly realize that it is not responsive and that it breaks your design.

Sadly iframes can’t keep it ratio by itself as the domain is a third party, you are not allowed to know the content of the iframe for security and privacy reasons.

So what can you do?

We can make a div that wraps the embed and that scales by default to the window or parent and keeps a scale. That can be archived by using margin and have the iframe within, scale to 100% in both width and height and then limit the height to “56.25%” which is 16/9 in scale.

export default ({ youtubeId }) => {
return (
<div
className="video"
style={{
position: "relative",
paddingBottom: "56.25%" /* 16:9 */,
paddingTop: 25,
height: 0
}}
>
<iframe
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%"
}}
src={`https://www.youtube.com/embed/${youtubeId}`}
frameBorder="0"
/>
</div>
);
};

Happy responsive coding ;)

I really like building stuff with React.js and Docker and also Meetups ❤

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store