YouTube video dimensions look distorted on Cell Phone version

[kevindott]

Hi!
I added the code below to Additional CSS, which makes my YouTube video fit the screen properly on Desktop and Tablet versions:
.entry-content iframe, .entry-content object { width: 100%; max-width: 100%; height: 600px;}
Unfortunately, on the Cell Phone version, the video appears extraordinarily long (vertically) and narrow (in width).
Can you suggest code that would allow the Cell Phone version of the video to fit the screen properly and so that (even when the phone is held vertically) the thumbnail is wider than it is long (vertically)?
In appreciation,
Kevin Ott
www.enjoyfeelingalive.com

[rad]

Hi Kevin,

Thanks for reaching out.

It’s because of the 600px height, regardless of device, it will stay at 600px. Hence, if it’s viewed on a 320px phone, it will be 320x600 long. I recommend using the video shortcode like from here http://demo.theme.co/integrity-1/shortcodes/responsive-video/ instead of that CSS.

It should make your video full-width while maintaining the aspect ratio of the video regardless of device. Please remember that youtube videos maintains its dimension responsively. You can’t make a rectangle video to square video just by using CSS, still you can but there will be display issues.

Thanks!

[kevindott]

Thank you, Rad! That was helpful.

[christian]

We’re happy that your issue was resolved, Kevin.