Savgordon Posted May 27 Share Posted May 27 Hey all! I recently used a snippet of code to improve the look of vertical videos in my client's portfolio. But for some reason on mobile, the videos appear super small (see screenshot attached.) Does anyone know how to correct this? Thank you in advance for taking a look! WEBSITE: https://mylk-collective-2024.squarespace.com/ (password: MYLK) Pages where this is happening (mobile only) - https://mylk-collective-2024.squarespace.com/portfolio/yamas https://mylk-collective-2024.squarespace.com/portfolio/steamies https://mylk-collective-2024.squarespace.com/portfolio/tacodeli Code I added to the custom CSS of the site: .sqs-native-video .native-video-player { padding-top: 0 !important; } .video-player .plyr { position: relative !important; } .video-player .plyr .plyr__controls:before { display:none; } .sqs-native-video .native-video-player { opacity:0; animation:fadeEnter 2s 2s forwards; } @keyframes fadeEnter { 0% { opacity:0; } 100% { opacity:1; } } Link to comment
tuanphan Posted May 30 Share Posted May 30 Change this line .sqs-native-video .native-video-player { padding-top: 0 !important; } .video-player .plyr { position: relative !important; } to this @media screen and (min-width:768px) { .sqs-native-video .native-video-player { padding-top: 0 !important; } .video-player .plyr { position: relative !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Savgordon Posted June 1 Author Share Posted June 1 Thank you @tuanphan - I did this but they still appear small on mobile for me. See screenshot attached. Any other possible solutions? Link to comment
Solution tuanphan Posted June 3 Solution Share Posted June 3 With this page https://mylk-collective-2024.squarespace.com/portfolio/yamas try this code to Custom CSS box @media screen and (max-width:767px) { section[data-section-id="663e94aa66f16c484c5598f4"] .video-player { padding-bottom: 90% !important; } } If it works, I will give quick instructions for other pages Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Savgordon Posted June 6 Author Share Posted June 6 WOO! Yes, this worked. Thanks for coming in and saving the day @tuanphan. You are truly the best. Link to comment
tuanphan Posted June 8 Share Posted June 8 Are you able to repeat for other videos? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment