Skip to content

Commit

Permalink
feat: add support for embed video files (#1558)
Browse files Browse the repository at this point in the history
  • Loading branch information
kungfux authored Feb 27, 2024
1 parent 8a1568c commit 9592146
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 10 deletions.
7 changes: 3 additions & 4 deletions _includes/embed/bilibili.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
<iframe
class="embed-video bilibili"
class="embed-video"
loading="lazy"
src="https://player.bilibili.com/player.html?bvid={{ include.id }}"
scrolling="no"
border="0"
frameborder="no"
frameborder="0"
framespacing="0"
allowfullscreen="true"
></iframe>
></iframe>
38 changes: 38 additions & 0 deletions _includes/embed/video.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{% assign video_url = include.src %}
{% assign poster_url = include.poster %}

{% unless video_url contains '://' %}
{%- capture video_url -%}
{% include img-url.html src=video_url img_path=page.img_path %}
{%- endcapture -%}
{% endunless %}

{% if poster_url %}
{% unless poster_url contains '://' %}
{%- capture poster_url -%}
{% include img-url.html src=poster_url img_path=page.img_path %}
{%- endcapture -%}
{% endunless %}
{% assign poster = 'poster="' | append: poster_url | append: '"' %}
{% endif %}

{% assign attributes = 'controls' %}

{% if include.autoplay %}
{% assign attributes = attributes | append: ' ' | append: 'autoplay' %}
{% endif %}

{% if include.loop %}
{% assign attributes = attributes | append: ' ' | append: 'loop' %}
{% endif %}

{% if include.muted %}
{% assign attributes = attributes | append: ' ' | append: 'muted' %}
{% endif %}

<p>
<video class="embed-video file" src="{{ video_url }}" {{ poster }} {{ attributes }}>
Your browser doesn't support HTML video. Here is a <a href="{{ url }}">link to the video</a> instead.
</video>
<em>{{ include.title }}</em>
</p>
2 changes: 1 addition & 1 deletion _includes/embed/youtube.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<iframe
class="embed-video youtube"
class="embed-video"
loading="lazy"
src="https://www.youtube.com/embed/{{ include.id }}"
title="YouTube video player"
Expand Down
27 changes: 27 additions & 0 deletions _posts/2019-08-08-write-a-new-post.md
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,8 @@ Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the pos

## Videos

### Video Sharing Platform

You can embed a video with the following syntax:

```liquid
Expand All @@ -443,6 +445,31 @@ The following table shows how to get the two parameters we need in a given video
| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211) | `twitch` | `1634779211` |
| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |

### Video File

If you want to embed a video file directly, use the following syntax:

```liquid
{% include embed/video.html src='{URL}' %}
```

Where `URL` is an URL to a video file e.g. `/assets/img/sample/video.mp4`.

You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.

- `poster='/path/to/poster.png'` - poster image for a video that is shown while video is downloading
- `title='Text'` - title for a video that appears below the video and looks same as for images
- `autoplay=true` - video automatically begins to play back as soon as it can
- `loop=true` - automatically seek back to the start upon reaching the end of the video
- `muted=true` - audio will be initially silenced

Consider an example utilizing all of the above:

```liquid
{% include embed/video.html src='video.mp4' poster='poster.png' title='Demo video'
autoplay=true loop=true muted=true %}
```

## Learn More

For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
18 changes: 13 additions & 5 deletions _sass/addon/commons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -550,17 +550,25 @@ main {
width: 100%;
height: 100%;
margin-bottom: 1rem;
aspect-ratio: 16 / 9;

@extend %rounded;

&.youtube,
&.bilibili {
aspect-ratio: 16 / 9;
}

&.twitch {
aspect-ratio: 310 / 189;
}

&.file {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
margin-bottom: 0;
}

@extend %img-caption;
}

/* --- buttons --- */
Expand Down

0 comments on commit 9592146

Please sign in to comment.