# Creating HTML chapter markers for a Vimeo video

**URL:** https://meta.discourse.org/t/creating-html-chapter-markers-for-a-vimeo-video/147212
**Category:** UX
**Created:** [April 8, 2020, 3:32am UTC](https://meta.discourse.org/t/creating-html-chapter-markers-for-a-vimeo-video/147212 "2020-04-08T03:32:42Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![oneflydown](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/oneflydown/32/155563_2.png) [@oneflydown](https://meta.discourse.org/u/oneflydown)
#### Post date: [April 8, 2020, 3:32am UTC](https://meta.discourse.org/t/creating-html-chapter-markers-for-a-vimeo-video/147212/1 "2020-04-08T03:32:43Z")

</div>

My client provides video classes to the registered users/subscriptions and we are able to achieve this through discourse forum. Now would like to add the chapter markers below the video, so that the users can go to different chapters as shown below:

https://codepen.io/2ne/embed/preview/revBy?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=revBy

However, when implemented the same, the CSS classes get stripped off, and even the ID on iframe. Could anyone help me what I am doing wrong? or what is the correct approach?

Thanks  
Oneflydown

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [April 8, 2020, 3:36am UTC](https://meta.discourse.org/t/creating-html-chapter-markers-for-a-vimeo-video/147212/2 "2020-04-08T03:36:51Z")

</div>

This looks very similar to [YouTube Timestamps Component](https://meta.discourse.org/t/youtube-timestamps-component/147091). Maybe you can use it as a starting point?

---

<div class="post-metadata">

### Author: ![oneflydown](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/oneflydown/32/155563_2.png) [@oneflydown](https://meta.discourse.org/u/oneflydown)
#### Post date: [April 8, 2020, 4:19am UTC](https://meta.discourse.org/t/creating-html-chapter-markers-for-a-vimeo-video/147212/3 "2020-04-08T04:19:45Z")

</div>

Great, but unfortunately that timestamp takes me to youtube page but my client doesn’t want users to go out of discourse page. Any other way, like widgets or something else? Point me

This is my page  
[https://forum.laex.in/t/class-38-age-of-extremism-part-4/218](https://forum.laex.in/t/class-38-age-of-extremism-part-4/218)

And these are what I have made:

 ![1](https://global.discourse-cdn.com/meta/original/3X/6/7/672538c9f7bcdfd9d41c57353910cbf97add4424.png)  
 ![2](https://global.discourse-cdn.com/meta/original/3X/e/1/e1a5b3ff4d4a5ff460311eb1e6b9205c866cb460.png)

Thanks