Provides responsive video support for both embedded videos (YouTube/Vimeo) and local HTML5 videos. YouTube and Vimeo iframes are automatically enhanced with responsive containers, while local videos receive responsive styling.
Usage
For YouTube/Vimeo: Use iframe elements - they're automatically detected and enhanced. For local videos: Use HTML5 <video> elements with optional <figure class="video"> containers.
Available Options
Automatic Features (YouTube/Vimeo):
Detects YouTube and Vimeo iframes automatically
Wraps iframes in <figure class="video"> containers
Removes fixed width and height attributes
Creates responsive video wrappers
Manual Features (Local Videos):
Responsive styling (100% width, auto height)
Optional <figure class="video"> containers
Video icon in captions (FontAwesome)
CSS Classes:
.square - Makes video square aspect ratio
Examples
Basic YouTube Video
This YouTube video is automatically wrapped in a responsive container.
YouTube Video with Caption
This video demonstrates proper seating techniques for ergonomic comfort.
Square Aspect Ratio Video
This video is displayed in a square aspect ratio using the .square class.
Vimeo Video
Vimeo videos are also automatically wrapped in responsive containers.
Video in Activity Container
Video Learning Activity
Learning Objectives
After watching this video, you should be able to:
Understand the key concepts presented
Apply the techniques shown
Identify common mistakes to avoid
Multiple Videos Side by Side
Video 1: Introduction
Video 2: Advanced Topics
Video with Custom Embed Code
This video includes additional attributes for enhanced security and mobile support.
Local HTML5 Video
This local video gets responsive styling but no automatic figure wrapping.
Local Video with Figure Container
Local video with manual figure container and video icon
Local Video with Multiple Sources
Safety Training Video
This video covers workplace safety fundamentals with multiple format support.
Duration: 10 minutes
Formats: MP4, WebM, OGG
Quality: HD
Notes
YouTube/Vimeo Videos: Automatically detected and enhanced with responsive containers
Local Videos: Get responsive styling but require manual <figure class="video"> containers
Iframes are automatically wrapped in <figure class="video"> containers
Width and height attributes are removed to enable responsive behavior
Videos are wrapped in <div class="video-wrapper"> for styling
Use .square class for square aspect ratio videos
Local videos support multiple source formats for better browser compatibility
Always include fallback text for browsers that don't support video
Consider file size and loading times for local video content