How to insert a video link within an image file? - GeeksforGeeks

19 Aug, 2020
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>
Create an html file and add the video.Syntax:<video src="video_url" controls></video>
<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>
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">        <!--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.
web.html
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png"                  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><!--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="https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png">            <source src="https://media.geeksforgeeks.org/wp-content/uploads/20200513195558/Placement100-_-GeeksforGeeks-1.mp4"                    type="video/mp4">        </video>               </p>   </body>   </html>Output:Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
<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="https://media.geeksforgeeks.org/wp-content/uploads/20200717172614/authPreLogo.png">            <source src="https://media.geeksforgeeks.org/wp-content/uploads/20200513195558/Placement100-_-GeeksforGeeks-1.mp4"                    type="video/mp4">        </video>               </p>   </body>   </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Misc
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
REST API (Introduction)
Design a web page using HTML and CSS
Angular File Upload
Form validation using jQuery
How to auto-resize an image to fit a div container using CSS?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?