hi everyone, I hope someone can help me in resizing the video in our mobile view, its showing half not the whole video frame, please see below thanks
https://trailerkits.com/products/10-000-lb-carter-tandem-trailer-axle-kit-sprung-20k-capacity
Topic summary
A user is experiencing an issue where videos display only partially (cut off) on mobile devices rather than showing the full frame.
Proposed Solutions:
Two community members offered CSS-based fixes:
-
theycallmemakka’s approach:
- Add custom CSS code in the theme.liquid file, just above the
</body>tag - The specific CSS code wasn’t clearly visible in the conversation
- Add custom CSS code in the theme.liquid file, just above the
-
PageFly-Henry’s approach:
- Navigate to: Online Store → Theme → Edit code
- Locate the base.css file
- Add a media query targeting screens up to 767px width
- Apply
max-width: 100% !importantto iframe elements
Status: The discussion remains open with no confirmation whether either solution resolved the mobile video display issue. Both solutions involve adding responsive CSS to ensure video iframes scale properly on mobile viewports.
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code just above tag
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
1 Like
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
p iframe {
max-width: 100% !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
1 Like