# Product Landing page - video is not responsive

**URL:** <https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282>\
**Category:** I Built This\
**Created:** [October 3, 2018, 10:06am UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282 "2018-10-03T10:06:54Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![farooqumars](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/farooqumars/32/102033_2.png) [@farooqumars](https://forum.freecodecamp.org/u/farooqumars)\
**Post date:** [October 3, 2018, 10:06am UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/1 "2018-10-03T10:06:54Z")

</div>

Please review my page and help me sorting out the problem that the embedded video is not responsive. [https://codepen.io/farooqumars/pen/PyYMKz](https://codepen.io/farooqumars/pen/PyYMKz)

A general review to improve my page is most welcomed.

---

<div class="post-metadata">

**Author:** ![vipatron](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/vipatron/32/81984_2.png) [@vipatron](https://forum.freecodecamp.org/u/vipatron)\
**Post date:** [October 3, 2018, 11:10am UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/2 "2018-10-03T11:10:41Z")

</div>

I ran into this problem at the same point. I threw it into [my CSS cheatsheet’s Responsive Images and Video section](https://s.codepen.io/vipatron/debug/YapZJV/nqkwvGgJNXpA#Responsive_Images_and_Video)

---

<div class="post-metadata">

**Author:** ![aditya\_p](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aditya_p/32/99447_2.png) [@aditya\_p](https://forum.freecodecamp.org/u/aditya_p)\
**Post date:** [October 3, 2018, 11:20am UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/3 "2018-10-03T11:20:39Z")

</div>

Changing thw width attribute of your iframe to a  
percentage value may help.  
See if that helps.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [October 3, 2018, 11:52am UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/4 "2018-10-03T11:52:23Z")

</div>

1. I would suggest not using :root like you are, keep the variables nothing else. The root pseudo class has the same specificity as a class selector, which makes overwriting the styles later less predictable.

This is where i would put the properties:

> **Summary**
>
> ```auto
> :root {
> --font_size: 14px;
> --theme_color: rgba(255, 196, 0, 0.808);
> }
> 
> html {
> box-sizing: border-box;
> }
> 
> *, *:before, *:after {
> margin: 0;
> padding: 0;
> box-sizing: inherit;
> }
> 
> body {
> font-family: "Ubuntu", "Segoe UI", Tahoma, Verdana, sans-serif;
> font-size: var(--font_size);
> color: black;
> background-color: #f4f4f4;
> opacity: 0.9; /* not sure this is a good idea */
> text-align: center;
> min-width: 320px;
> }
> 
> ```

1. Not sure why, but you have commented out the HTML that the CSS is targeting for the video. Took me a bit to figure out what was going on but the align-items: center; on #main-body is what is making the video disappear. You will need to add a z-index on the header to make it stay on top of the video when scrolling the page.

```auto
#main-body {
    justify-content: center;
    /* align-items: center; */
}

```

1. Only add the selectors and properties that you want to change in media queries, do not redeclare properties and values that have already been assigned.

---

<div class="post-metadata">

**Author:** ![farooqumars](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/farooqumars/32/102033_2.png) [@farooqumars](https://forum.freecodecamp.org/u/farooqumars)\
**Post date:** [October 3, 2018, 4:16pm UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/5 "2018-10-03T16:16:03Z")

</div>

That’s great. It worked. I wonder why **align-items: center;** is disallowing the video to appear?  
I applied **align-self: center;** in flex-boxes so they appear center aligned after commenting out **align-items: center;**.

I have put all stuff in **html, body {}** that I had put in **:root** earlier. Is it correct now?

And thank you for your feedback. I applied that on my code as per my understanding.

---

<div class="post-metadata">

**Author:** ![six03](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/six03/32/220719_2.png) [@six03](https://forum.freecodecamp.org/u/six03)\
**Post date:** [October 3, 2018, 4:29pm UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/6 "2018-10-03T16:29:23Z")

</div>

I just used this on the iframe itself, putting a `max-width` on the `video` or `iframe` container,

```auto
video, iframe {
  height: auto;
  max-width: 560px;
  width: 100%;
}

```

the entire section gets;

```auto
#video-player {
  display: flex;
  height: 460px;
  justify-content: center;
  margin-top: 50px;
  padding-top: 130px;
}

```

the `justify-content` does the centering. I think it’s a little less code to deal with.

---

<div class="post-metadata">

**Author:** ![farooqumars](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/farooqumars/32/102033_2.png) [@farooqumars](https://forum.freecodecamp.org/u/farooqumars)\
**Post date:** [October 3, 2018, 5:15pm UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/7 "2018-10-03T17:15:39Z")

</div>

Thank you. Following code is now working:

> ```
> #how-it-works {
> position: relative;
> justify-content: center;
> padding-bottom: 56.25%;
> height: 0; 
> overflow: hidden;
> }
>     
> #how-it-works iframe {
> position: absolute;
> width: 70%; height: 65%;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [October 4, 2018, 3:17pm UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/8 "2018-10-04T15:17:59Z")

</div>

Not sure why you added the `<style>` element to the CSS but it is only used for [internal CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works#Internal_stylesheet) (i.e. css declared in the html).

---

<div class="post-metadata">

**Author:** ![farooqumars](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/farooqumars/32/102033_2.png) [@farooqumars](https://forum.freecodecamp.org/u/farooqumars)\
**Post date:** [October 8, 2018, 5:47am UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/9 "2018-10-08T05:47:26Z")

</div>

That was copy pasted mistakenly from visual code to freecodecamp. I will take care now. Thanks for pointing out.

---

<div class="post-metadata">

**Author:** ![MommaTopaz](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mommatopaz/32/102513_2.png) [@MommaTopaz](https://forum.freecodecamp.org/u/MommaTopaz)\
**Post date:** [October 9, 2018, 5:24am UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/10 "2018-10-09T05:24:37Z")

</div>

The video is what took so long. But at last, I just stuck in an iframe and copied the embed code and voila.

I actually built the html first for the 16/16 points of the project and in the end, I settled for 15/16 because I’m fast and didn’t want to spend all night on the height issues which always makes the navbar think it’s not still at the top.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:42pm UTC](https://forum.freecodecamp.org/t/product-landing-page-video-is-not-responsive/231282/11 "2021-06-01T13:42:25Z")

</div>