How to left-align Vimeo embed

When I embed a Vimeo iFrame, the content automatically centers itself. I'd like to have control over the alignment of the iFrame and keep it to the left. (iFrames are gross.)

I've set up a flexbox container (.example-div) with two flex containers on the inside. The first container (.player-div) has the stock Vimeo iFrame player in it. The second container will ideally hold a list of credits. I can't seem to justify this iframe to the left.

HTML

<div class="example-div">
  <div class="player-div">
    <iframe src="https://player.vimeo.com/video/142760309" frameborder="0" width="100%" allow="autoplay; fullscreen" allowfullscreen></iframe>
  </div>
  <div class="credits-div">
  </div>
</div>

CSS

body {
  margin: 0;
}

.example-div {
  height: 100vh;
  display: flex;
}

.player-div {
  background-color: orange;
  width: 80vw;
}

.credits-div {
  background-color: green;
  width: 20vw;
}

.player-div iframe, .player-div object, .player-div embed {
    width: 100%;
    height: 100%;
}

https://codepen.io/czeins/pen/dxJywB

Solution

Your problem is happening outside the iframe code completely. Flex-box doesn't respond to width. Inside a display:flex container, you should use min/max or flex-basis to set sizing... Here are some docs.

Basically, your flexbox CSS should look like this:

.example-div {
  height: 100vh;
  display: flex;
  justify-content: space-between; // forces the two items to each side
}

.player-div {
  background-color: orange;
  flex-basis: 80%;
}

.credits-div {
  background-color: green;
  flex-basis:20%;
}

Now an iFrame with width:100% will fill the flex container. HOWEVER, you'll run into some additional issues because a 100% width video won't take into account different aspect ratios.

You basically need to set the height of the iFrame as well. This would be easy except for that the height of the video is actually a percentage of the now dynamic width. For example, a typical widescreen video is the ratio of 16:9 (units wide by units high). So when the width changes the height must change too.

The easiest way to do this is by creating another container like a div (inside the flex-container) and using absolute positioning and padding to correctly size the video.

Here's a good explanation of how that works and a codepen of it in action.