Cacher is the code snippet organizer for pro developers

/* if container has display: flex the pseudo element will not play nice in firefox */
.container{
  position: relative;
  width: 75%; /* the value that you want */
}

.container:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

html,
body{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}