Product Landing page - video is not responsive

Code Feedback
1

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

A general review to improve my page is most welcomed.

2

I ran into this problem at the same point. I threw it into my CSS cheatsheet’s Responsive Images and Video section

3

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

4
  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 
: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.
#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.
1 Like
5

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.

6

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

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

the entire section gets;

#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.

1 Like
7

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%;
    }
1 Like
8

Not sure why you added the <style> element to the CSS but it is only used for internal CSS (i.e. css declared in the html).

9

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

10

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.