Here is the code for embedding an iframe:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
When using makeStyles, it is important to know how to write rules for the embed container:
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Attempted styles that did not work:
embedContainer: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
border: "6px solid yellow"
}
embedContainer iframe: {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}