Open In App

How to insert a video link within an image file?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  1. Create an html file and add the video.
    Syntax:

    <video src="video_url" controls></video>
  2. 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=
               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=
            <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>
    <!--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=
                        type="video/mp4">
            </video>
             
          </p>
       </body>
       
    </html>

    
    

    Output:



    Last Updated : 19 Aug, 2020
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
    Similar Reads