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.
video source.html
<!DOCTYPE html>
<html>
<body bgcolor="black">
<video width="50%"
height="50%"
src=
controls>
</video>
</body>
</html>
|
Below is the main file having the image in which the image is linked with the above HTML file.
web.html
<!DOCTYPE html>
<html>
<body bgcolor="black">
<a href=
<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:
Create an HTML file with the image.Add link for the video to that image.
Syntax:<video poster="image_url">
<source src="video_url" type="video_type">
</video>Example: Below is the main html file.
<!DOCTYPE html>
<html>
<body bgcolor="black">
<p align='center'>
<video controls
width="400"
height="200"
poster=
<source src=
type="video/mp4">
</video>
</p>
</body>
</html>
|
Output:
