SP Property - Video Ratio - Forum | JoomShaper
Solved Extensions

SP Property - Video Ratio

Asked by Yofie Setiawan 5 years ago Last activity 5 years ago

Accepted answer

Marked as the solution
Ariba Staff
5 years ago

Please use the code below. This will apply various size for different devices.

.spproperty-video iframe {
    height: 75.5% !important;
}
@media (min-width: 768px) and (max-width: 991px) {
    .spproperty-video iframe {
        height: 50.5% !important;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    .spproperty-video iframe {
        height: 65.5% !important;
    }
}
@media (max-width: 480px) {
    .spproperty-video iframe {
        height: 65.5% !important;
    }
}

6 more replies

Oldest first Newest first Most helpful
Ariba Staff
5 years ago

Hello

Thank you for your query. Kindly allow me some time, i will look into it & get back to you soon.

Yofie Setiawan Asked this
5 years ago

Hi,

Any update?

Ariba Staff
5 years ago

Hello

Sorry for the late response.
Just to confirm, are you asking about the YouTube Video?

If yes, then the aspect ratio of that video cannot be changed unfortunately, however the height of the HTML element that contains the Video can be changed using the code below in Custom CSS.
By reducing the height of that block, the video will appear wider. 

.spproperty-video iframe {
    height: 90% !important;
}
Yofie Setiawan Asked this
5 years ago

Hi,

Thanks, this some how works, but any way to define different css rule for mobile? and tablet?

This solution seems to apple the same rule for all devices. Still not a responsive solution.

Yofie Setiawan Asked this
5 years ago

Hi Ariba,

Thanks, i managed the height to better fit each media.....

Ariba Staff
5 years ago

You are most welcome.

Log in to reply.