Cách đơn giản để tạo HTML Video Player Card cho Ghost ▶️

Cách tự tạo Video Player Card bằng HTML card cho Ghost.

Cường Trần
Cường Trần
1 phút đọc .

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.

Video Player Card
<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"

<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

<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.

Hướng Dẫn

Bạn có thể quan tâm

Hướng dẫn dùng cổng thông tin Ghost Portal cho Ghost CMS

Hướng dẫn cách sử dụng cổng thông tin Ghost Portal.

Hướng dẫn dùng cổng thông tin Ghost Portal cơ bản

Viết bài trên Google Docs, xuất bản trên Ghost

Hướng dẫn cách viết blog trên Google Docs và xuất bản trên Ghost CMS.

Viết bài trên Google Docs, xuất bản trên Ghost

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT

Hướng dẫn tự tạo thông báo email thời gian thực khi có thành viên mới đăng ký bằng IFTTT miễn phí.

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT
Cường Trần

Cường Trần

Một blogger ẩn sỹ – Thích viết blog, viết sách và nghiên cứu chuyên sâu về công nghệ website cho blogging. Chuyên SEO và tiếp thị affiliate bằng nội dung độc quyền.

Cường Trần

bởi @Cường Trần