NEW: Download generated videos for free!

Customize Videos Using the HTML API

Vidgen offers an HTML API that can be used to choose the text and images that appear in your video. Instead of letting Vidgen choose your video components for you, you can edit your HTML and add some basic attributes to its elements, which specifies exactly which media and sentences appear in your video, and the order in which they're displayed.

Customize Your Video's Images, Subtitles, Title, and Byline

  1. Edit your HTML by adding any of the following attributes to specific text and image elements. This will make Vidgen use them in your video.
  2. Submit your HTML to be converted into a video.

NOTE: You don't have to specify every video component if you don't want to. It's ok to skip some. Vidgen will automatically choose the video components you omit.

Video Component HTML Attribute Example Description
Title data-vidgen-title
<head>
    <title>This Lip Balm Will Restore Your Faith In Humanity</title>
    ...
</head>
<body>
    <h1>10 Secrets They Want You To Think They Don't Want You To Know</h1>
    ...
    <p data-vidgen-title>Watch This Grizzly Bear Defend Himself Like A Boss</p>
</body>


Watch This Grizzly Bear Defend Himself Like A Boss

  • Specifies the title text that is shown at the top of the entire video.
  • Can be added to any single HTML element that contains text.
  • Can be added to a hidden HTML element.
  • This is a bare attribute, it does not need a value.
Byline data-vidgen-byline
<p>
<span data-vidgen-byline>SnoozeMaster Flex</span>, Channel 4 Evening News. 
</p>


SnoozeMaster Flex

  • Specifies the byline text that is shown at the top of the entire video beneath the title.
  • Can be added to any single HTML element that contains text.
  • Can be added to a hidden HTML element.
  • This is a bare attribute, it does not need a value.
Images data-vidgen-img
<img data-vidgen-img="3" src="bearfight.jpg">
...
<img data-vidgen-img="1" src="bearface.jpg">
...
<img src="ignore.jpg">
...
<img data-vidgen-img="2" src="bearchill.jpg">
...

  1. bearface.jpg

    bearface.jpg

  2. bearchill.jpg

    bearchill.jpg

  3. bearfight.jpg

    bearfight.jpg

  • Specifies which images to display in the video.
  • The attribute value (="1", ="2", ...) determines the order the image appears in your video.
  • If the attribute values are omitted, the images are displayed in the order they appear in your HTML.
  • Can be added to any HTML element that has a valid src or srcset attribute.
  • Can be added to a hidden HTML element.
Subtitles data-vidgen-subtitle
<p>
    <span data-vidgen-subtitle="1">Bruno the bear lives in the Yukon. He spends most of his time working at a distribution center.</span> 

    Bruno is not very happy at his job, and finds it tedious.

    <span data-vidgen-subtitle="2">Sometimes Bruno looks at Facebook while at work to pass the time. Bruno is not supposed to browse the Internet at work because it is against corporate policy.</span> 

    Bruno uses a proxy on his computer to bypass the company's firewall that blocks social media websites. 

    <span data-vidgen-subtitle="3">One day Bruno's boss found out and got very angry. Bears do not respond well to aggression from other bears, and Bruno filed a "hostile work environment" complaint with HR.</span>
</p>

The video will display and narrate subtitles in this order:

  1. Bruno the bear lives in the Yukon.
  2. He spends most of his time working at a distribution center.
  3. Sometimes Bruno looks at Facebook while at work to pass the time.
  4. Bruno is not supposed to browse the Internet at work because it is against corporate policy.
  5. One day Bruno's boss found out and got very angry.
  6. Bears do not respond well to aggression from other bears, and Bruno filed a "hostile work environment" complaint with HR.

  • Specifies the text that is narrated and displayed as subtitles at the bottom of the video.
  • The attribute value (="1", ="2", ...) determines the order the text appears in your video.
  • If the attribute value is omitted, the texts are displayed in the order they appear in your HTML.
  • Can be added to any HTML element that contains text.
  • Can be added to a hidden HTML element.