Product Landing page - video responsiveness

Hi all,

I’ve been able to make my embedded video responsive to my iPhone, but the problem is now how it looks on Chrome, on my Mac. The video width is 100% of the screen, which looks okay on the mobile device, but not in the desktop browser.

I tried setting a max-width and max-height, but when I do that, the dimensions are skewed, probably because of the black bars on the top and bottom of the video. I tried looking that up, too, but I can’t figure out how to get rid of the black bars.

This is where I’m at with it: https://codepen.io/GrohTech/full/LYbxwWj

Thanks, in advance!

Hello,

You could place your .video-container within another container to control the width that way. I’m not sure how to remove the black bars, I think it’s automatically added by Youtube. You also might want to set some breakpoints with media queries.

Hi aetones,

Thanks for the idea! I tried putting the video container into an additional container, but I wasn’t able to come up with any results.

I did find a variation of the technique I used to make the video responsive, and I was finally able to make the video smaller in the desktop browser.

Unfortunately, I created a new issue. Now the embedded video is sitting on the left side of the screen, and I can’t get it to center. I tried changing this in the video container as well as the bigger container, but I’m having no luck. Any ideas?

Thank you!

@GrohTech, you have two elements in your code that have typo’s. They’re not correct.
You can either;

  1. Switch the Syntax Highlighting on Codepen to help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.
  2. Run your HTML code through the W3C validator to see your errors.

Thank you, thank you! This explains a lot! Actually, my whole project just changed when I fixed those errors.

Guess I’m going to have to go through and try all those techniques again, to fix that video. Still having troubles!

Have you tried changing the size with #video-sizing?

Hi again! Yes, I did try adjusting the video size with #video-sizing. I pretty much tried resizing it with all containers, but I’m still having no luck with it.

I ended up just working on the other parts of the project and submitting it, as is. It works in the mobile browser. It just looks funny in the desktop browser. The video is way too big, and just takes up the whole screen.

If you have any other ideas, I’m open to going back and working on it again, but I just had to move on.

Thanks again!

The width here is set to 100% making the video always take up the entire width of the screen.

#video-sizing {
    width: 100%;
    height: 100%;
    margin: auto;
    padding: auto;
}

Argh! You’re right! I thought I tried adjusting that, already! I just set the width to 90%, and that fixed the problem. Thank you so much!

Np! Good luck and have fun!