diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html index cf928a7f8..bb20688e4 100644 --- a/_includes/embed/audio.html +++ b/_includes/embed/audio.html @@ -9,7 +9,7 @@ {% endunless %}
- + {% assign extension = src | split: '.' | last %} {% assign types = extension | concat: types %} diff --git a/_includes/embed/spotify.html b/_includes/embed/spotify.html new file mode 100644 index 000000000..4e0a848d5 --- /dev/null +++ b/_includes/embed/spotify.html @@ -0,0 +1,22 @@ +{% assign size = 352 %} +{% assign theme = '' %} + +{% if include.compact %} + {% assign size = 152 %} +{% endif %} + +{% if include.dark %} + {% assign theme = '?theme=0' %} +{% endif %} + + + diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index 102016552..f048f013c 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -256,11 +256,9 @@ For normal images: ``` {: .nolineno } -### Video +### Social Media Platforms -#### Social Media Platform - -You can embed videos from social media platforms with the following syntax: +You can embed video/audio from social media platforms with the following syntax: ```liquid {% include embed/{Platform}.html id='{ID}' %} @@ -268,15 +266,21 @@ You can embed videos from social media platforms with the following syntax: Where `Platform` is the lowercase of the platform name, and `ID` is the video ID. -The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms. +The following table shows how to get the two parameters we need in a given video/audio URL, and you can also know the currently supported video platforms. -| Video URL | Platform | ID | -| -------------------------------------------------------------------------------------------------- | ---------- | :------------- | -| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` | -| [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 URL | Platform | ID | +| -------------------------------------------------------------------------------------------------------------------------- | ---------- | :----------------------- | +| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` | +| [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` | +| [https://www.open.**spotify**.com/track/**3OuMIIFP5TxM8tLXMWYPGV**](https://open.spotify.com/track/3OuMIIFP5TxM8tLXMWYPGV) | `spotify` | `3OuMIIFP5TxM8tLXMWYPGV` | -#### Video Files +Spotify supports some additional parameters: + +- `compact` - to display compact player instead (ex. `{% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' compact=1 %}`); +- `dark` - to force dark theme (ex. `{% include embed/spotify.html id='3OuMIIFP5TxM8tLXMWYPGV' dark=1 %}`). + +### Video Files If you want to embed a video file directly, use the following syntax: @@ -310,7 +314,7 @@ Consider an example using all of the above: %} ``` -### Audios +### Audio Files If you want to embed an audio file directly, use the following syntax: diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss index 46e9eb6e8..b512a484c 100644 --- a/_sass/base/_base.scss +++ b/_sass/base/_base.scss @@ -314,7 +314,14 @@ main { .embed-audio { width: 100%; - display: block; + + &.file { + display: block; + } + + &.spotify { + border-radius: 14px; + } @extend %img-caption; }