Video API
Overview
Release Notes
Discover & Test
Build Your Solution
Tutorials
How-To
Migration Guides
OpenTok Server SDK Transition Guides
Joining a Session
Getting Started
Initializing a Session Object
Connecting to a session
Disconnect from a Session
Detecting when you have disconnected
Automatic reconnection
Detecting when clients have connected and disconnected
Troubleshooting session connection issues (Javascript)
Troubleshooting session connection issues (React Native)
Streams
Publishing Streams
Subscribe to Streams
Overview
Detect when streams are created in a session
Subscribe to a stream
Automatic reconnection
Detecting when streams end and a subscriber's video is disabled
Getting information about a stream
Unsubscribe from a stream (Javascript only)
Managing subscriber streams (Javascript Only)
Managing subscriber streams (React Native)
Troubleshooting (Javascript Only)
UI Customization
General customization
Swift
Web Only
Directly accessing the video element for a Publisher or Subscriber
Displaying a custom UI element when Subscriber audio is blocked
Adjusting video cropping and letterboxing
Hiding all built-in user interface controls for videos
Displaying or hiding the name in a video
Setting an image to display in audio-only mode
Setting the initial position and dimensions of a video
Accessing MediaStream objects
Accessing MediaStream objects for Subscribers
Resizing or repositioning a video
Getting a snapshot image of a video
Tools & Debugging
Recording Videos
Create a Session
Create Tokens
Use Signaling
Video Moderation
Custom Video Capturing
Custom Video Rendering
Reference
Explanation
Sessions
Audio fallback
Connection Tokens
Signaling
Session Monitoring
Server Rotation
Archiving
Broadcast
Experience Composer
SIP Interconnect
AI Connectors
Media Processor
Additional Resources
Security
Developer Tools
Vonage Video API Reference App for React
Manage & Support
Video Express
Video + AI
Adjusting video cropping and letterboxing
You can specify cropping or letterboxing of a Publisher or Subscriber's video by setting the fitMode property of the options you pass into OT.initPublisher() or Session.subscribe(). Pass in one of the following two strings:
"cover"— The video is cropped if its dimensions do not match those of the DOM element. This is the default setting for videos publishing a camera feed."contain"— The video is letterboxed if its dimensions do not match those of the DOM element. This is the default setting for screen-sharing videos.
For example, the following code initializes a publisher with the video element letterboxed:
The following code subscribes to a stream with the video element cropped:
Navigation
Adjusting video cropping and letterboxing