https://yourdomain.com/tour.html?viewerframe=mode:full
// Hypothetical viewer controller const viewer = new MediaViewer( container: '#video-frame', mode: 'normal' ); function goFullView() viewer.settings.mode = 'full'; // This triggers the "viewerframe mode full" state viewer.expandToViewport(); viewerframe mode full
<iframe src="https://my.matterport.com/show/?m=ID&viewerframe=mode:full" frameborder="0"></iframe> Implementing this specific viewing mode isn't just a neat trick; it directly impacts your bottom line and user retention. 1. Conversion Optimization (E-commerce) For product pages using 3D models (e.g., a sneaker or a piece of furniture), enabling viewerframe mode full allows the customer to see the texture and stitching in macro detail. Studies show that full-screen 3D product viewers increase conversion rates by up to 40% because users feel they are "holding" the product. 2. Reduced Cognitive Load Standard web pages are noisy. Ads, headers, and footers compete for attention. When you trigger the full viewer frame, you strip away distractions. The user’s brain shifts into "cinema mode," focusing entirely on the narrative or product. 3. Adaptive Bitrate Streaming When viewerframe mode full is activated, modern players automatically request a higher bitrate. The user gets a sharper image because the system knows the larger screen will reveal compression artifacts. Common Issues & Troubleshooting Even with proper code, you might encounter glitches. Here is how to fix the most frequent viewerframe mode full errors. Issue 1: The Black Bar Problem (Aspect Ratio Mismatch) Symptom: You go full screen, but black bars appear on the sides or top/bottom. Solution: Your viewer frame does not match the native aspect ratio (usually 16:9). https://yourdomain
<iframe src="https://www.youtube.com/embed/VIDEO_ID?fs=1" allow="fullscreen; ..."> </iframe> In custom Matterport or Kuula embeds, you might see: Studies show that full-screen 3D product viewers increase
When a user clicks a "VR" button, the script runs:
Third-party services often support a variant of this command via their iframe API.
/* Ensure your CSS locks the aspect ratio */ .viewerframe aspect-ratio: 16 / 9; object-fit: contain;