Resource icon

Free Lower thirds in HTML/CSS

Lower thirds for OBS Studio using HTML, Javascript and CSS.

This project is based on After Effects template by Amaksi http://videohive.net/item/lower-thirds/10338608, and Matt Chestnut https://codepen.io/mattchestnut/pen/dMrONe.

More information can be found on https://obs.infor-r.com.

Can customize the lower thirds on url via parameters. For example: https://obs.infor-r.com/lower?id=3&line1=OBS&color1=ffffff&line2=Studio&color2=cf4c4e
example.gif


Parameter available:
  • id: template number
  • line1: text for first line
  • line2: text for second line
  • color1: first hex color code
  • color2: secondhex color code

Templates available:
  1. 1.gif
    • color1: all text
    • color2: symbol /
  2. 2.gif
    • color1: second line
    • color2: first line
  3. 3.gif
    • color1: first part of text
    • color2: second part of text
  4. 4.gif
    • color1: all text
    • color2: symbol |
  5. 5.gif
    • color1: all text
    • color2: all lines

browser-3.png
Author
vjccruz
Views
63,147
First release
Last update
Rating
5.00 star(s) 2 ratings

Latest reviews

Great job ! Would it be possible to adjust the durations ? (IN, OUT, STILL)
Great job!
Top