Menu
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
React and Vue enable efficient video embedding through component-based rendering that binds sources, events, and states reactively, supporting native HTML5 playback or third-party iframes without performance hits. Embed local files via
for custom controls or use libraries like React Player (React) and Vue Video Player (Vue) for unified handling of YouTube, Vimeo, HLS, and DASH streams. This helps in reducing code duplication across platforms while maintaining accessibility and responsive layouts. Prerequisites JavaScript and HTML/CSS Knowledge : DOM events, media attributes, and responsive styling for video containers. React or Vue Fundamentals : Components, props, state management (useState in React, data() in Vue), and lifecycle (useEffect/mounted). Node.js and npm : LTS v18+ for package management; VS Code with extensions (ES7 React/JS snippets for React, Volar for Vue). Video Assets : Local MP4/WebM files in public/ or URLs/API keys for embeds (YouTube API, Vimeo Pro). Set up a React Project using this guide: Creating a React App Set up a Vue Project using this guide: Quick Start Embed Basic Video in Vue Components Create src/components/VideoEmbed.jsx with useRef for the video element and event handlers: import React, { useRef } from 'react'; const VideoEmbed = ({ src, width = 640, height = 360 }) => { const videoRef = useRef(null); const handlePlay = () => console.log('Playing'); const handleLoad = () => console.log('Loaded'); return (
); }; export default VideoEmbed; Use in App.jsx :
. Place files in public/ . Explanation : crossOrigin='anonymous' : Allows cross-origin requests without credentials for the video resource. onPlay={handlePlay} : Event handler that logs 'Playing' when the video starts playing. onLoadedData={handleLoad} : Event handler that logs 'Loaded' when enough data is loaded to play the video. Embed Third-Party Videos (YouTube/Vimeo) in React Create src/components/VideoEmbed.vue with :src binding and @event directives:
Add CSS in src/App.css : .player-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .react-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } . Use in App.jsx:
or url='https://vimeo.com/123456789' . Explanation : crossOrigin='anonymous' : Allows cross-origin requests without credentials for the video resource. onPlay={handlePlay} : Event handler that logs 'Playing' when the video starts playing. onLoadedData={handleLoad} : Event handler that logs 'Loaded' when enough data is loaded to play the video. Embed Third-Party Videos (YouTube/Vimeo) in Vue Install vue-youtube for YouTube and vue-vimeo-player for Vimeo via npm install vue-youtube vue-vimeo-player . Create src/components/ThirdPartyEmbed.vue using iframes for simplicity, or integrate libraries:
Use in App.vue :
or url='https://vimeo.com/123456789' . Explanation : iframe (YouTube) : The embedded YouTube player using the extracted videoId , with modest branding enabled and appropriate permissions set. iframe (Vimeo) : The embedded Vimeo player using the extracted videoId , with autoplay and fullscreen permissions enabled. player-wrapper : A CSS container that maintains a 16:9 aspect ratio for responsive iframe embedding by using padding and absolute positioning. Add Custom Controls and Events In React, extend VideoEmbed.jsx with useState for state, useRef/useEffect for listeners. Update to: import React, { useState, useRef, useEffect } from 'react'; const VideoEmbed = ({ src }) => { const videoRef = useRef(null); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [volume, setVolume] = useState(1); useEffect(() => { const video = videoRef.current; if (video) { const updateProgress = () => setCurrentTime(video.currentTime); const setDur = () => setDuration(video.duration); video.addEventListener('timeupdate', updateProgress); video.addEventListener('loadedmetadata', setDur); return () => { video.removeEventListener('timeupdate', updateProgress); video.removeEventListener('loadedmetadata', setDur); }; } }, [src]); const seek = (time) => videoRef.current.currentTime = parseFloat(time); const setVol = (vol) => { const volumeVal = parseFloat(vol); setVolume(volumeVal); videoRef.current.volume = volumeVal; }; return (
seek(e.target.value)} />
setVol(e.target.value)} />
); }; export default VideoEmbed; Explanation : seek(time) : Function to jump the video playback to a specified time in seconds. setVol(vol) : Function to update the video volume both in state and on the video element. First input (range slider) : Controls and displays the playback position, allowing the user to seek through the video timeline. Second input (range slider) : Controls and displays the volume level, allowing the user to adjust the video sound. Use in App.jsx :
. In Vue, update VideoEmbed.vue with data() , methods, and bindings:
Use in App.vue :
. Explanation : video ref ('video') : A Vue ref attached to the
element to directly access and control the video DOM API. setDuration() : Method that sets duration by reading the video element's duration once metadata has loaded. updateProgress() : Method that updates currentTime based on the video element’s current playback time during playback. seek() : Method that sets the video’s playback position to the selected currentTime when the range input changes. Handle Streaming (HLS/DASH) in React Install react-player via npm install react-player . Create src/components/StreamingVideo.jsx : import React from 'react'; import ReactPlayer from 'react-player'; const StreamingVideo = ({ url, width = '100%', height = 360 }) => { const handleError = (e) => console.error('Stream error:', e); return (
); }; export default StreamingVideo; Add responsive CSS in src/App.css : .player-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .react-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } . For HLS, use url='https://example.com/stream.m3u8' ; for DASH, url='https://example.com/stream.mpd' . Import and use in the App.jsx:
. Ensure CORS is enabled on the streaming server for cross-origin playback. Explanation : ReactPlayer controls : Enables native playback controls for the video. ReactPlayer playing : Starts the video playback automatically when the player loads. ReactPlayer config : Configuration object for streaming protocols and player behavior: hls.withCredentials : Controls whether to send credentials with HLS requests, set to false here. dash.options.lowLatencyMode : Enables low latency mode for DASH streaming. file.attributes.crossOrigin : Sets the CORS policy to anonymous for loaded media files. Handle Streaming (HLS/DASH) in Vue Install hls.js via npm install hls.js and dashjs via npm install dashjs . For HLS, create src/components/StreamingVideo.vue :
Explanation : this.hls.loadSource(src) : Loads the provided HLS video source into the Hls.js player. this.hls.attachMedia(videoElement) : Attaches the Hls.js player to the video element to manage playback. video.canPlayType('application/vnd.apple.mpegurl') : Checks if the browser can natively play HLS streams (e.g., Safari). video.src = src : Sets the video element’s source directly when native HLS playback is supported. hls.destroy() : Cleans up and releases resources used by the Hls.js player before the component is unmounted. For DASH streams, similarly use dash.js:
Use in App.vue :
or .mpd . Explanation : dashjs.MediaPlayer().create() : Creates a new instance of a DASH.js media player. player.initialize(videoElement, src, autoplay) : Initializes the player with the video element and source, and optionally starts playback immediately. player.reset() : Releases resources and cleans up the DASH.js player before the component is unmounted. Optimize and Secure Embeds To ensure that embedded videos perform well across different devices and remain secure, follow the best practices for optimization and security. Optimize Performance Use IntersectionObserver for lazy loading with preload='none' . In React ( VideoEmbed.jsx ): In React (VideoEmbed.jsx) : import React, { useRef, useEffect } from 'react'; const VideoEmbed = ({ src }) => { const videoRef = useRef(null); const handleIntersection = (entries) => { const entry = entries[0]; if (entry.isIntersecting) { videoRef.current.load(); } }; useEffect(() => { const observer = new IntersectionObserver(handleIntersection, { threshold: 0.5 }); if (videoRef.current) { observer.observe(videoRef.current); } return () => observer.disconnect(); }, []); return
; }; Explanation : videoRef.current.load() : Triggers the browser to load the video when it enters the viewport. new IntersectionObserver(handleIntersection, { threshold: 0.5 }) : Creates an observer that monitors the video element and calls handleIntersection when at least 50% of it is visible in the viewport. preload='none' : Prevents the video from loading automatically until it is manually triggered or enters view. In Vue (VideoEmbed.vue) :
Set preload='metadata' for essentials. Use MP4/H.264 for compatibility; serve lower resolutions (720p/480p) for mobile. Explanation : this.$refs.video.load() : Triggers the video element to begin loading only when it becomes at least 50% visible in the viewport. preload='none' : Prevents the browser from preloading the video until manually triggered, reducing unnecessary network usage. new IntersectionObserver(..., { threshold: 0.5 }) : Creates an observer that activates when at least half of the video is in view, enabling lazy loading. Secure Embeds Use HTTPS for sources:
. Set server headers: res.setHeader('X-Frame-Options', 'SAMEORIGIN'); or CSP. Add crossOrigin='anonymous' :
. Disable controls: In React,
; in Vue,
or library equivalent. Use platform privacy settings and API keys. For premium, integrate DRM like Widevine/FairPlay.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
