Skip to content

Instantly share code, notes, and snippets.

@MariaJackson1

MariaJackson1/Responsive Videos – GeneratePress

Last active August 8, 2022 20:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MariaJackson1/ae319ba1316be6d93cfa01c4454edc7d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MariaJackson1/ae319ba1316be6d93cfa01c4454edc7d to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Videos – GeneratePress
Raw
Responsive Videos – GeneratePress
We can make our embedded videos responsive by wrapping them in an HTML element, like this:
<div class="videoWrapper">
Your video embed code
</div>
Then, we need to add this CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment