A user encountered a white line appearing below a full-screen homepage video when their Shopify site (built on Dawn theme) was accessed through Instagram or Messenger in-app browsers. The video was initially styled using 100vh in custom Liquid code.
Root Cause:
Mobile in-app browsers handle viewport height (100vh) inconsistently, particularly on iOS-based browsers used by Instagram and Messenger.
Solution Provided:
A community member suggested replacing the 100vh approach with fixed positioning and added iOS-specific fixes using -webkit-fill-available. The initial solution removed the white line but caused unwanted video scaling that cropped the frame.
Final Resolution:
After adjusting the code, the user successfully resolved the issue by changing object-fit from contain to cover, which eliminated the white line while filling the entire screen properly.
Status: Resolved. The video now displays correctly across mobile in-app browsers without white space or excessive cropping.
Summarized with AI on October 29.
AI used: claude-sonnet-4-5-20250929.
I have an issue with my homepage, full screen video when my site is accessed through messenger of instagram. It seems that the in-app browser strangely crops the screen creating a thick white line sitting below the video.
I have the videos set up with custom liquid with vh100, so I don’t understand why this issue is occurring. Unfortunately I have very very limited coding knowledge, so I’m hoping someone might be able to help me with this.
For reference, my site has been built on Dawn theme and the custom liquid support the homepage video is below.
I took a look at your site issue with the full-screen video showing that white line when viewed through Instagram or Messenger. I’ve run into this exact problem before—mobile in-app browsers are honestly a pain!
The issue is with how those browsers handle the viewport height. When you use “100vh” like in your current code, it gets weird on mobile, especially in those in-app browsers.
Try replacing your current video code with this:
<style>
.video-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: -1;
background-color: #000;
}
.video-container video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
object-fit: cover;
}
/* Fix for iOS Safari and in-app browsers */
@supports (-webkit-touch-callout: none) {
.video-container {
height: -webkit-fill-available;
}
}
/* Make sure content shows up over the video */
.page-content {
position: relative;
z-index: 1;
}
</style>
<div class="video-container">
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/8c2d253993c74b0c8a4ba58a6349ed5f.mp4" type="video/mp4">
</video>
</div>
<!-- Your page content goes here -->
<div class="page-content">
<!-- Page content here -->
</div>
This approach fixes a few things:
Uses fixed positioning instead of vh units (more reliable on mobile)
Centers and scales the video properly
Adds a special fix for iOS-based browsers (which is what Instagram/Messenger use)
Just make sure you wrap any content that should appear on top of the video in a container with the “page-content” class.
Let me know if this works for you! If you’re still seeing issues, we might need to add a bit of JavaScript to dynamically adjust things, but let’s try this simpler fix first.
Thank you so much for sending through this updated code. The code has removed the white line, however it’s also scaled the video quite dramatically. So now it doesn’t a lot of the frame it cut-off.
is there someone we might able to update the code to just extend the height without necessarily scaling the video?
