Jump to content

Video Collection Individual Video Page -- Changing the size of the video

Recommended Posts

Posted

My desktop users were complaining about the enormous full-width individual video size that displays when you click on a video in the video collection. I used this rough custom css to reduce the size:

.lesson-video-wrapper  {width:640px!important;
  height:360px!important;
  margin:5% 20%}

and the page now looks like the screenshot attached (or visit the page here:https://relspec.com/video-library/v/powerful-ultrasonics-clean-blind-holes). However, this has now messed up how the video looks on a mobile phone. I tried to refine with some @media statements but then everything reverts to the original 100% width. Any suggestions?

 

Capture.PNG

Posted

Must have had a mistake in my earlier @media statements as having the following seems to have solved the mobile display. Now I just need to define position and I will have it where I want it.

.lesson-video-wrapper  {width:640px!important;
  height:360px!important;
  margin:5% 20%}


@media only screen and (max-width:500px){
.lesson-video-wrapper  {
width:100%!important
}
}

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.