Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
Mobile web video players must handle orientation changes to provide a seamless viewing experience across portrait and landscape modes. Users rotate their devices while watching videos, and how the video player responds to orientation changes can impact the user experience. Proper handling of orientation changes includes adjusting the video player’s size, maintaining aspect ratio, and ensuring playback controls remain accessible. Understanding Device Orientation and Screen Size Changes When a user rotates their mobile device, the orientation changes from portrait (vertical) to landscape (horizontal) or vice versa. This results in a shift in the aspect ratio of the screen, and the video player must respond to avoid stretching or distorting the content. Mobile devices provide orientation change events that you can capture using JavaScript to adjust the layout of the video player. Additionally, CSS media queries can be used to modify the player’s size and other aspects based on the device’s orientation. Key Events for Handling Orientation resize : Triggered when the window size changes, including orientation changes. orientationchange : Triggered when the device orientation changes between portrait and landscape modes. These events allow developers to dynamically adjust the video player’s size and layout. Adjusting Video Player Size on Orientation Change One of the first things to adjust when the device orientation changes is the size of the video player. Typically, a full-screen video player in portrait mode should take up most of the screen, and in landscape mode, the video player should maximize width while adjusting the height accordingly. Example: Adjusting the Video Player Size function debounce(func, delay) { let timeout; return function() { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, arguments), delay); }; } const adjustPlayerSize = debounce(() => { const videoPlayer = document.getElementById('videoPlayer'); videoPlayer.style.width = '100%'; videoPlayer.style.height = '100%'; // Let CSS `object-fit: contain` handle aspect ratio }, 100); window.addEventListener('resize', adjustPlayerSize); Explanation: debounce: This utility delays the execution of a function adjustPlayerSize until the user has stopped resizing the window for a specified time (100ms). adjustPlayerSize: This function sets the video player's width and height to 100% of its container. window.addEventListener('resize'): This listens for browser resize events and calls the debounced adjustPlayerSize function. Maintaining Aspect Ratio Maintaining the correct aspect ratio of the video content to avoid distorting the video. The aspect ratio is typically the width-to-height ratio of the video itself. To maintain this ratio when handling orientation changes, CSS object-fit and object-position properties can be used. Example : CSS for Maintaining Aspect Ratio #videoPlayer { width: 100%; height: 100%; object-fit: contain; /* Ensures the aspect ratio is maintained */ object-position: center; /* Keeps the video centered in the container */ } Explanation: object-fit : The contain value ensures that the video fits within the container while maintaining its aspect ratio. object-position : This ensures the video remains centered when the container's aspect ratio differs from that of the video. Handling Fullscreen Mode During Orientation Change When the user switches between portrait and landscape modes, fullscreen mode often provides a better experience for watching videos. However, fullscreen mode can behave differently depending on the browser and device. Using the Fullscreen API, you can ensure that the video player enters or exits fullscreen mode seamlessly. Example : Fullscreen Handling on Orientation Change function handleOrientationChange() { const videoPlayer = document.getElementById('videoPlayer'); const isLandscape = window.innerWidth > window.innerHeight; if (isLandscape && !document.fullscreenElement) { // Optional: Show a button to let users choose fullscreen console.log('Tip: Add a button to enter fullscreen in landscape mode.'); } } // Check for fullscreen support if ('requestFullscreen' in document.documentElement) { window.addEventListener('orientationchange', handleOrientationChange); } else { console.warn('Fullscreen API not supported'); } Explanation: handleOrientationChange: This function detects when the device orientation changes by comparing the window’s width and height. isLandscape: A boolean that is true when the device is in landscape orientation ( window.innerWidth > window.innerHeight ), and false when in portrait. Fullscreen check: The function checks if the document is not already in fullscreen mode ( !document.fullscreenElement ) when in landscape mode. Responsive Design Considerations Ensuring that the video player adapts to different screen sizes and orientations for responsive web design. CSS media queries to apply different styles based on the orientation of the device. Example : CSS Media Queries for Orientation @media (orientation: landscape) { #videoPlayer { width: 100%; height: auto; } } @media (orientation: portrait) { #videoPlayer { width: auto; height: 100%; } } Explanation: landscape : In landscape mode, the video player uses the full width of the screen while adjusting the height to maintain the aspect ratio. portrait : In portrait mode, the video player uses the full height of the screen while adjusting the width. Handling Audio and Subtitles on Orientation Change Along with video resizing, orientation changes can impact other aspects of the video experience, such as audio output and subtitle positioning. To ensure that the experience remains consistent, these elements need to be handled separately. Example : Adjusting Subtitle Positioning window.addEventListener('resize', () => { const subtitles = document.getElementById('subtitles'); if (window.innerWidth > window.innerHeight) { // Adjust subtitle position for landscape subtitles.style.bottom = '10px'; } else { // Adjust subtitle position for portrait subtitles.style.bottom = '30px'; } }); Explanation : This script adjusts the positioning of subtitles based on the orientation of the device. Hence, the subtitles are not obstructed by the controls or other UI elements.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
