HTML Video Generator

Generate the HTML <video> tag for your website with our free tool. Customize the player with controls, autoplay, and a poster image, then copy the ready-to-use code to embed MP4 and other videos.

How to Use Our HTML Video Generator (Full Guide)

Embedding videos directly into your website gives you full control over the player’s appearance and behavior. Our HTML Video Generator helps you create the necessary <video> tag with all the right settings, complete with a live preview.

Here’s how to create your custom video player:

Step 1: Provide the Video Source

First, you need to tell the player where to find your video files.

• Video URL: Paste the direct link to your video file (e.g., a URL ending in .mp4, .webm, or .ogg). The video will appear in the Live Preview as soon as you add a valid URL.
• Poster Image URL (Optional): Paste a link to an image file here. This image will act as a thumbnail, displaying in the player window before the user clicks the play button.

Step 2: Configure the Player Settings

Next, customize the size and functionality of your video player.

• Dimensions:
  • Width: Set the width of the video player in pixels (e.g., 640).
  • Height: You can set a specific height, but it’s often best to leave the height blank. This allows the browser to automatically calculate the correct height based on the video’s aspect ratio, preventing black bars.
• Options (Checkboxes):
  • Show Controls: Keep this checked to display the default player controls (play/pause, volume, timeline, fullscreen). This is highly recommended.
  • Autoplay: The video will try to start playing automatically when the page loads. Note: Most modern browsers will only allow autoplay if the video is also Muted.
  • Muted: The video will start with the sound off.
  • Loop: The video will automatically restart from the beginning once it finishes.

Step 3: Test with the Live Preview

The Live Preview section shows an interactive video player that updates in real-time as you change the settings. Use it to play the video, check the poster image, and confirm the controls are working as you expect.

Step 4: Copy Your Code

Once you are happy with the player in the preview, scroll down to the output boxes:

• Video Code: This contains just the <video> tag and its attributes. This is the code you will copy to embed the player into an existing webpage.
• HTML Video Code: This provides a complete, basic HTML page with your video player already included. This is useful for testing or creating a simple, standalone page.

Click the Copy button next to the code you need, and you’re ready to paste it into your website!