> ## Content Index
> Fetch the complete content index at: https://bepublish.com/vi/llms.txt
> Use this file to discover other available public pages before exploring further.

# Cách đơn giản để tạo HTML Video Player Card cho Ghost ▶️
- URL: https://bepublish.com/vi/huong-dan-tu-tao-video-player-card-cho-ghost-cms/
- Published: 2020-10-20T04:42:22.000Z
- Updated: 2022-11-20T05:56:56.000Z
- Description: Cách tự tạo Video Player Card bằng HTML card cho Ghost.
- Author: Cường Thạch
- Tags: Hướng Dẫn, #Import 2025-09-22 14:17, #Import 2025-09-23 03:55

Ghost không có sẵn video player card để dùng, nhưng bạn vẫn có thể tạo một video player tương tự WordPress Video Block bằng HTML Card.

![](https://gblobscdn.gitbook.com/assets%2F-LCdEadomswqxNPr8qAg%2F-MDy7J2_tzCucNbLdiWi%2F-MDy8iK0gNqG1ntQEedQ%2Fimage.png?alt=media&token=659180f8-8fc9-4028-9058-c449cc6c4c9e)

Video Player Card

```html
<figure>
	<video width="100%" height="100%" controls autoplay loop muted preload="metadata">
		<source src="https://video-cua-ban.mp4" type="video/mp4">
	</video>
</figure>
```

Bạn có thể chuyển sang **bố cục rộng** bằng cách thay đổi giá trị `width="1400"`

```html
<figure>
	<video width="1400" height="100%" controls autoplay loop muted preload="metadata">
    	<source src="https://video-cua-ban.mp4" type="video/mp4">
	</video>
</figure>
```

Bạn có thể tắt chức năng **tự động chạy** bằng cách bỏ `autoplay`

```html
<figure>
	<video width="100%" height="100%" controls loop muted preload="metadata">
    	<source src="https://video-cua-ban.mp4" type="video/mp4">
	</video>
    <figcaption>Caption cho video của bạn</figcaption>
</figure>
```

**Chú ý:** bạn cần phải có tag `<figure>` như trên nếu không muốn video off-screen

Nguồn Video bạn cần tải lên hosting khác.

Còn nếu bạn muốn dùng Youtube thì cứ dán link vào như bình thường, Ghost sẽ tự oEmbed render link Youtube thành Video Player tự động.