FCC Project Landing Page - IDs confusing me

#1

Alright so I’ve been working on this Landing Page all for a couple hours trying to figure out some workarounds for stuff like vertically aligning the image and text contained in the same header element. So appreciate if anyone has some corrections I can make on my current solution which I feel is non-optimal.

The current issue I have at hand, however is a little more annoying. Currently everything works and looks how I want it to. My problem is that again, I feel like the way I wrote the code is sub-optimal.

In my code I have an ID called “display” which I use to align the required video link to the center. I have thrown that ID in a ‘div’ which encompasses my ‘iframe’ youtube video.

As part of the project requirement I must also give my iframe an id of “video” which so far I just have empty because its only required.

I want to know why my “Display” ID stops doing its job when I move it from div into the iframe element. The video becomes very tiny and moves into the left corner of the page. Also is there a particular purpose to including ids in - iframe id="" elements?

Shouldn’t I be able to just use the required “video” id and successfully be able to centralize my video?

https://codepen.io/merlinambrose/pen/bGVRaaO

Thanks guys!

#2

The video is overflowing the display container div, you just can’t see it. The iframe has inline styles for the width and height, set in absolute units. The height set on the iframe is larger than the div height. If you set overflow: hidden on the div you can “see” the overflow.

When you move the CSS to the iframe you can see the sizes set on it reflected by the element. You are setting the iframe height to 100px and its width to the element default size.

It is the same as removing the inline styles on the iframe for the width and setting the height to 100px.

<div>
  <iframe id="video" height="100" src="https://www.youtube.com/embed/FOWg2vSheHg"></iframe>
</div>

As for the centering using text-align: center that rule has to stay on the parent div to still work.

#3