Loading Please Wait...
To embed a video in HTML document, use <video> element with <source> element.
<video> element defines a container for video content.
<source> element defines the video source file. We can set more than one <source> element, the browser play the first recognized format.
controls attribute defines the video controls like play, pause, volume, etc.
<track> element defines the text track for video like subtitle. src attribute define the file path, kind attribute define the type of content, srclang attribute defines the track language, label attribute defines the title for track.
If the browser does not support video element then the text inside <video> and </video> will be displayed.
<video width="300" height="150" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<track src="subtitle_en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
To play the video automatically use the autoplay attribute.
<video width="300" height="150" controls autoplay>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
To mute the video use the muted attribute.
<video width="300" height="150" controls autoplay muted>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
One of the best option to embed video is from YouTube.
Each and every YouTube video must have an Id (look like kJGhgJHGJHjhgH) which id displayed (on URL) when you play the video.
To embed YouTube video use <iframe> element. Define the video path in src attribute.
https://www.youtube.com/embed/videoID
<iframe width="300" height="150"
src="https://www.youtube.com/embed/E7El1JsxuCA">
</iframe>
Use autoplay=1 and mute=1
<iframe width="300" height="150"
src="https://www.youtube.com/embed/E7El1JsxuCA?autoplay=1&mute=1">
</iframe>
Use controls=1 (default) to show controls and controls=0 to hide controls
<iframe width="300" height="150"
src="https://www.youtube.com/embed/E7El1JsxuCA?controls=0">
</iframe>
Use playlist=videoId1,videoId2 to add playlist
Use loop=1 to play in loop
<iframe width="300" height="150"
src="https://www.youtube.com/embed/E7El1JsxuCA?playlist=E7El1JsxuCA&loop=1">
</iframe>
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved