There are mainly two methods to insert a video link in an image file:
Method 1:
Linking the HTML file containing the video with the image in a different HTML file.
-
Steps:
- Create an html file and add the video.
Syntax:<video src="video_url" controls></video>
-
Create another HTML file having the image, in which the image should contain the link of the previous HTML file.
Syntax:<a href="html_file_url"> <img src="image_url"> </a>
Example: Below is the HTML file having the video.
<!DOCTYPE html> < html >
< body bgcolor = "black" >
<!--adding the video file-->
< video width = "50%" height = "50%"
src =
"https://media.geeksforgeeks.org/wp-content/uploads/20200513195558/Placement100-_-GeeksforGeeks-1.mp4" controls>
</ video >
</ body >
</ html >
|
Below is the main file having the image in which the image is linked with the above HTML file.
<!DOCTYPE html> < html >
< body bgcolor = "black" >
<!--Adding the image file-->
<!--also adding the link of video source.html to the image-->
< a href =
"https://media.geeksforgeeks.org/wp-content/uploads/20200513195558/Placement100-_-GeeksforGeeks-1.mp4" >
< img src =
width = "100" height = "100" />
</ a >
</ body >
</ html >
|
Output:
Method 2:
Create a single HTML file which contains both the image and the video. The video opens on clicking the image.
Steps:
Syntax:
<video poster="image_url"> <source src="video_url" type="video_type"> </video>
Example: Below is the main html file.
<!DOCTYPE html> <!--web.html.html--> < html >
< body bgcolor = "black" >
< p align = 'center' >
<!--Adding the video file along with the image-->
< video controls
width = "400" height = "200" poster =
< source src =
"https://media.geeksforgeeks.org/wp-content/uploads/20200513195558/Placement100-_-GeeksforGeeks-1.mp4" type = "video/mp4" >
</ video >
</ p >
</ body >
</ html >
|
Output: