Requesting CSS Help with Responsive Video Height in JS Wall Streams

toddjharrison731

Good morrow!

I'm struggling to get the videos in the JomSocial wall streams to display in a responsive manner.

In the above screenshot, the video thumbnail is displaying correctly, in the correct aspect ratio.

However, as you can see above, once you hit the play button, the height immediately resizes and breaks the aspect ratio.

Here's the CSS I've currently implemented for responsive video:

/*  FULL SIZE JS VIDEOS & IMAGES */
@media only screen and (min-width: 481px){
.joms-media--video, .joms-media--album {

    max-width: 100%;
  	height: auto;
}}

.joms-list--half .joms-list__item {
	width: 100% !important;
  	height: auto;
}

@media only screen and (min-width: 481px){
.joms-media--image, .joms-media--images, .joms-media--event {
  	max-width: 100% !important;
  	height: auto;
}

Any help you could give would be greatly appreciated.

Thank you!

Ninja

toddjharrison731
Hi
I checked the above view and setting of video is same as you set in JomSocial video settings.
Also the thumbnail and video both are same http://prntscr.com/13bvgod

Can you check and let me know if you fixed this issue on site.

Ninja

Ninja I checked the above view and setting of video is same as you set in JomSocial video settings.

There is no issue found on site. You are forcing a small thumb to show full with size

@media only screen and (min-width: 481px){
.joms-media--video, .joms-media--album {

    max-width: 100%;
  	height: auto;
}}

This does not apply for iframe, iframe height auto resize depends on YT video you can not control it as its auto already.

toddjharrison731

Hi Pankaj,

Thank you so much for your quick reply.

We were doing some diagnostic work on the CSS when you had a look.

Could you please check again now? Thank you!

Todd