feat: add the example post about embed video
This commit is contained in:
parent
377ff3a4cc
commit
1ccf80f9a2
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: 'Cover Image Example'
|
||||
published: 2022-09-09
|
||||
published: 2023-09-01
|
||||
description: 'How to set a cover image using the cover attribute.'
|
||||
cover:
|
||||
url: 'https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg'
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Markdown Example
|
||||
published: 2023-10-18
|
||||
published: 2023-10-01
|
||||
description: A simple example of a Markdown blog post.
|
||||
cover:
|
||||
url:
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: Include Video in the Posts
|
||||
published: 2022-08-01
|
||||
description: This post demonstrates how to include embedded video in a blog post.
|
||||
cover:
|
||||
url:
|
||||
alt:
|
||||
tags: [Example, Video]
|
||||
categories: []
|
||||
---
|
||||
Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: Include Video in the Post
|
||||
published: 2023-10-19
|
||||
// ...
|
||||
---
|
||||
|
||||
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
|
||||
```
|
||||
|
||||
## YouTube
|
||||
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
|
||||
## Bilibili
|
||||
<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
|
|
@ -26,7 +26,7 @@ const { remarkPluginFrontmatter } = await entry.render();
|
|||
---
|
||||
<MainGridLayout banner={entry.data.cover.url} title={entry.data.title}>
|
||||
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
|
||||
<div class:list={["card-base z-10 px-4 md:px-9 py-6 relative w-full ",
|
||||
<div class:list={["card-base z-10 px-4 md:px-9 pt-6 pb-10 relative w-full ",
|
||||
{}
|
||||
]}>
|
||||
<!-- word count and reading time -->
|
||||
|
@ -171,5 +171,10 @@ const { remarkPluginFrontmatter } = await entry.render();
|
|||
hr
|
||||
border-color: var(--line-divider)
|
||||
border-style: dashed
|
||||
iframe
|
||||
border-radius: 8px
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 100%
|
||||
|
||||
</style>
|
Loading…
Reference in New Issue