From f118bebbc3735c0eb5af07ac4e80699db32baeef Mon Sep 17 00:00:00 2001 From: Joshua Fogg Date: Tue, 21 Sep 2021 14:19:07 +0100 Subject: [PATCH 1/8] Added license --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..18ba8d1 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 Nathan Lam + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From d2fe9cc21f703abec45aaec2444c2dc09b0a77a8 Mon Sep 17 00:00:00 2001 From: Joshua Fogg Date: Tue, 21 Sep 2021 23:32:34 +0100 Subject: [PATCH 2/8] Restored twitchDomain, removed mixerID --- README.md | 3 +-- example.md | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e1097ff..c80fafb 100644 --- a/README.md +++ b/README.md @@ -372,12 +372,11 @@ Name | Type | Description ```markdown --- -title: "Full Example" youtubeId: putYourIDHere vimeoId: putYourIDHere twitchId: putYourIDHere +twitchDomain: putYourDomainHere streamableId: putYourIDHere -mixerId: putYourIDHere driveId: putYourIDHere detikId: putYourIDHere dailymotionId: putYourIDHere diff --git a/example.md b/example.md index d481a07..c459967 100644 --- a/example.md +++ b/example.md @@ -1,10 +1,9 @@ --- -title: "Full Example" youtubeId: putYourIDHere vimeoId: putYourIDHere twitchId: putYourIDHere +twitchDomain: putYourDomainHere streamableId: putYourIDHere -mixerId: putYourIDHere driveId: putYourIDHere detikId: putYourIDHere dailymotionId: putYourIDHere From 28cd5ee7295f1bead2e42137727702fa6265d839 Mon Sep 17 00:00:00 2001 From: Nathan Lam Date: Tue, 21 Sep 2021 17:07:44 -1000 Subject: [PATCH 3/8] Embed Facebook clips/videos. JavaScript SDK standard method and iframe non-standard method --- README.md | 86 ++++++++++++++++++++++++++++++++++- _includes/facebookPlayer.html | 17 +++++++ example.md | 16 ++++++- 3 files changed, 116 insertions(+), 3 deletions(-) create mode 100644 _includes/facebookPlayer.html diff --git a/README.md b/README.md index c80fafb..57e5b1d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # jekyll-embed-video -Embed YouTube, Vimeo, Twitch, Streamable, Google Drive videos/clips and more in Jekyll webpages without a plugin. If you are hosting your webpage using GitHub pages, you can't use third party plugins. Here is a method to use "includes" instead of plugins. +Embed YouTube, Vimeo, Twitch, Facebook, Streamable, Google Drive videos/clips and more in Jekyll webpages without a plugin. If you are hosting your webpage using GitHub pages, you can't use third party plugins. Here is a method to use "includes" instead of plugins. See the raw text in `example.md` for a complete example. Remember to add in [video-embed.css](https://github.com/nathancy/jekyll-embed-video/blob/master/video-embed.css) for [responsive videos](#responsive-videos) that automatically resize with changing window dimensions. @@ -13,6 +13,7 @@ See the raw text in `example.md` for a complete example. Remember to add in [vid * [Embed YouTube](#embed-youtube) * [Embed Vimeo](#embed-vimeo) * [Embed Twitch](#embed-twitch) +* [Embed Facebook](#embed-facebook) * [Embed Streamable](#embed-streamable) * [Embed Google Drive](#embed-google-drive) * [Additional support for 20Detik, Dailymotion, Vidio, and LINE Today](#additional-support) @@ -116,6 +117,78 @@ twitchDomain: putYourDomainHere See the [embedding Twitch clips documentation](https://dev.twitch.tv/docs/embed/video-and-clips/#non-interactive-iframes-for-clips) for more details. +## Embed Facebook + +There are two types of Facebook videos/clips that you can embed: videos from the facebook feed using ` +``` + +Instead of using a template, it may be better to manually insert the code. For this method, you would simply copy/paste that code similar to all the other `_include` files. Due to the difficulty, hassle, and weird embed behavior, there will no example of this method here. The recommendation is to use the newer Facebook Watch clips method. + +#### Facebook Watch clips + +**Very Important**: The newer Facebook Watch clips method requires you to import a JavaScript SDK script which very very likely does some tracking in the background but automatically handles video resizing and has smooth playback using their own CSS. If you are not okay with this then you would have to use the non-standard version. + +Facebook pushed out their Watch feature on [https://www.facebook.com/watch](https://www.facebook.com/watch). This method can be used to embed any video from there. First choose a video you want to embed, then click on `Share` -> `Embed` -> `Advanced Settings`. This will open a new link. In the "Embedded Video Player Configurator", there will be a "URL of video" section which may look something like this: + +``` +https://www.facebook.com/pokergo/videos/1243061482783766/ +``` + +If you already know the link of the specific video, the URL would look like this: + +``` +https://www.facebook.com/watch/?v=1243061482783766 +``` + +In both of these cases, the video ID would be `1243061482783766`. + +Next create a file in your `_includes` folder called `facebookPlayer.html` with this code inside: + +```html + +
+ + + +
+
+``` + +**Note:** This is a ripped out version of the original JavaScript SDK code that Facebook provides which removes many unnecessary additions. If you want the original, click on `Get Code` on the advanced settings page. + +Place this snippet inside your .md file where you want to embed your video: + +```liquid +{% include facebookPlayer.html id=page.facebookId %} +``` + +On the top of your .md file, put the Facebook video ID. You could also put the ID of the video directly. + +```yaml +--- +facebookId: 1243061482783766 +--- +``` + +Facebook uses their own video parameters, for more information take a look at the [Embedded Video & Live Video Player](https://developers.facebook.com/docs/plugins/embedded-video-player/) documentation. + ## Embed Streamable Create a file in your `_includes` folder called `streamablePlayer.html` with this code inside: @@ -376,6 +449,7 @@ youtubeId: putYourIDHere vimeoId: putYourIDHere twitchId: putYourIDHere twitchDomain: putYourDomainHere +facebookId: putYourIDHere streamableId: putYourIDHere driveId: putYourIDHere detikId: putYourIDHere @@ -416,6 +490,16 @@ Example: twitchId: GrotesqueArbitraryGullPupper {% include twitchPlayer.html id=page.twitchId domain=page.twitchDomain %} +## Embed Facebook + + + +{% include facebookPlayer.html id=page.facebookId %} + ## Embed Streamable + + + +
+ + + +
+
diff --git a/example.md b/example.md index c459967..652b42c 100644 --- a/example.md +++ b/example.md @@ -3,6 +3,7 @@ youtubeId: putYourIDHere vimeoId: putYourIDHere twitchId: putYourIDHere twitchDomain: putYourDomainHere +facebookId: putYourIDHere streamableId: putYourIDHere driveId: putYourIDHere detikId: putYourIDHere @@ -35,12 +36,23 @@ Example: vimeoID: 22439234 ## Embed Twitch -{% include twitchPlayer.html id=page.twitchId %} +{% include twitchPlayer.html id=page.twitchId domain=page.twitchDomain %} + +## Embed Facebook + + + +{% include facebookPlayer.html id=page.facebookId %} ## Embed Streamable From d9074b93d99e1628138634350a91bd106e9375d6 Mon Sep 17 00:00:00 2001 From: Nathan Lam Date: Sat, 6 Aug 2022 16:26:39 -1000 Subject: [PATCH 4/8] Embed Twitter videos/posts --- README.md | 67 ++++++++++++++++++++++++++++++++++-- _includes/twitterPlayer.html | 11 ++++++ 2 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 _includes/twitterPlayer.html diff --git a/README.md b/README.md index 57e5b1d..fec2ac4 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # jekyll-embed-video -Embed YouTube, Vimeo, Twitch, Facebook, Streamable, Google Drive videos/clips and more in Jekyll webpages without a plugin. If you are hosting your webpage using GitHub pages, you can't use third party plugins. Here is a method to use "includes" instead of plugins. +Embed YouTube, Vimeo, Twitch, Facebook, Twitter, Streamable, Google Drive videos/clips and more in Jekyll webpages without a plugin. If you are hosting your webpage using GitHub pages, you can't use third party plugins. Here is a method to use "includes" instead of plugins. See the raw text in `example.md` for a complete example. Remember to add in [video-embed.css](https://github.com/nathancy/jekyll-embed-video/blob/master/video-embed.css) for [responsive videos](#responsive-videos) that automatically resize with changing window dimensions. @@ -14,6 +14,7 @@ See the raw text in `example.md` for a complete example. Remember to add in [vid * [Embed Vimeo](#embed-vimeo) * [Embed Twitch](#embed-twitch) * [Embed Facebook](#embed-facebook) +* [Embed Twitter](#embed-twitter) * [Embed Streamable](#embed-streamable) * [Embed Google Drive](#embed-google-drive) * [Additional support for 20Detik, Dailymotion, Vidio, and LINE Today](#additional-support) @@ -85,7 +86,7 @@ vimeoId: putYourIDHere ## Embed Twitch -Embedding Twitch clips requires an additional "Domain" parameter. Create a file in your `_includes` folder called `twitchPlayer.html` with this code inside: +Embedding Twitch clips requires an additional "Domain" parameter. This is simply your website URL. Create a file in your `_includes` folder called `twitchPlayer.html` with this code inside: ```html
@@ -115,6 +116,8 @@ twitchDomain: putYourDomainHere --- ``` +*Note*: If you are running your local website off `localhost:4000`, you may get a `clips.twitch.tv refused to connect` error. But as long as your "domain" is set correctly, it should properly display on the live production site. + See the [embedding Twitch clips documentation](https://dev.twitch.tv/docs/embed/video-and-clips/#non-interactive-iframes-for-clips) for more details. ## Embed Facebook @@ -158,6 +161,11 @@ In both of these cases, the video ID would be `1243061482783766`. Next create a file in your `_includes` folder called `facebookPlayer.html` with this code inside: ```html + +
@@ -189,6 +197,46 @@ facebookId: 1243061482783766 Facebook uses their own video parameters, for more information take a look at the [Embedded Video & Live Video Player](https://developers.facebook.com/docs/plugins/embedded-video-player/) documentation. +## Embed Twitter + +If your desired video/post URL to embed is for example + +``` +https://twitter.com/SJosephBurns/status/1555282591665848320 +``` + +Then your video ID would be `SJosephBurns/status/1555282591665848320`. + +Next create a file in your `_includes` folder called `twitterPlayer.html` with this code inside: + +```html + + + + + +``` + +Place this snippet inside your .md file where you want to embed your video: + +```liquid +{% include twitterPlayer.html id=page.twitterId %} +``` + +On the top of your .md file, put the Twitter video/post ID. You could also put the ID of the source directly. + +```yaml +--- +twitterId: putYourIDHere +--- +``` + +*Note*: This is a stripped down barebones embed method which strips down unnecessary code and should work for both videos and regular Twitter text posts. For [full customization options](https://publish.twitter.com/#) you can use Twitter's embed generator to set color themes, default language, conversation toggles and much more. + ## Embed Streamable Create a file in your `_includes` folder called `streamablePlayer.html` with this code inside: @@ -450,6 +498,7 @@ vimeoId: putYourIDHere twitchId: putYourIDHere twitchDomain: putYourDomainHere facebookId: putYourIDHere +twitterId: putYourIDHere streamableId: putYourIDHere driveId: putYourIDHere detikId: putYourIDHere @@ -500,6 +549,16 @@ Example: facebookId: 1243061482783766 {% include facebookPlayer.html id=page.facebookId %} +## Embed Twitter + + + +{% include twitterPlayer.html id=page.twitterId %} + ## Embed Streamable + + + + + + From d9faade3c3b08d37e663a0f40026110ef49c099f Mon Sep 17 00:00:00 2001 From: Nathan Lam Date: Sat, 6 Aug 2022 17:33:38 -1000 Subject: [PATCH 5/8] Embed Instagram videos/reels/posts --- README.md | 60 ++++++++++++++++++++++++++++++++-- _includes/instagramPlayer.html | 13 ++++++++ 2 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 _includes/instagramPlayer.html diff --git a/README.md b/README.md index fec2ac4..0e69d3d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # jekyll-embed-video -Embed YouTube, Vimeo, Twitch, Facebook, Twitter, Streamable, Google Drive videos/clips and more in Jekyll webpages without a plugin. If you are hosting your webpage using GitHub pages, you can't use third party plugins. Here is a method to use "includes" instead of plugins. +Embed YouTube, Vimeo, Twitch, Facebook, Instagram, Twitter, Streamable, Google Drive videos/clips and more in Jekyll webpages without a plugin. If you are hosting your webpage using GitHub pages, you can't use third party plugins. Here is a method to use "includes" instead of plugins. See the raw text in `example.md` for a complete example. Remember to add in [video-embed.css](https://github.com/nathancy/jekyll-embed-video/blob/master/video-embed.css) for [responsive videos](#responsive-videos) that automatically resize with changing window dimensions. @@ -14,6 +14,7 @@ See the raw text in `example.md` for a complete example. Remember to add in [vid * [Embed Vimeo](#embed-vimeo) * [Embed Twitch](#embed-twitch) * [Embed Facebook](#embed-facebook) +* [Embed Instagram](#embed-instagram) * [Embed Twitter](#embed-twitter) * [Embed Streamable](#embed-streamable) * [Embed Google Drive](#embed-google-drive) @@ -116,7 +117,7 @@ twitchDomain: putYourDomainHere --- ``` -*Note*: If you are running your local website off `localhost:4000`, you may get a `clips.twitch.tv refused to connect` error. But as long as your "domain" is set correctly, it should properly display on the live production site. +**Note**: If you are running your local website off `localhost:4000`, you may get a `clips.twitch.tv refused to connect` error. But as long as your "domain" is set correctly, it should properly display on the live production site. See the [embedding Twitch clips documentation](https://dev.twitch.tv/docs/embed/video-and-clips/#non-interactive-iframes-for-clips) for more details. @@ -197,6 +198,48 @@ facebookId: 1243061482783766 Facebook uses their own video parameters, for more information take a look at the [Embedded Video & Live Video Player](https://developers.facebook.com/docs/plugins/embedded-video-player/) documentation. +## Embed Instagram + +To obtain your video/post ID, click on your desired post to embed and you will get a URL that looks something like this: + +``` +https://www.instagram.com/p/CgdzCoMoUBJ/ +``` + +Your video ID would be `CgdzCoMoUBJ`. + +Next create a file in your `_includes` folder called `instagramPlayer.html` with this code inside: + +```html + + +
+
+ + +``` + +Place this snippet inside your .md file where you want to embed your video: + +```liquid +{% include instagramPlayer.html id=page.instagramId %} +``` + +On the top of your .md file, put the Instagram video/reel/post ID. You could also put the ID of the source directly. + +```yaml +--- +instagramId: putYourIDHere +--- +``` + +**Note**: This is an extremely stripped down version of the built-in Instagram embed link they automatically generate when you click the `•••` then `Embed` on a post. Any tracking/information they tried to mine has been attempted to be removed as much as possible. As far as I can tell, there was been no effect on the embed behavior after removing them. Also be aware that you must include the Instagram JavaScript for embedding to work. + ## Embed Twitter If your desired video/post URL to embed is for example @@ -235,7 +278,7 @@ twitterId: putYourIDHere --- ``` -*Note*: This is a stripped down barebones embed method which strips down unnecessary code and should work for both videos and regular Twitter text posts. For [full customization options](https://publish.twitter.com/#) you can use Twitter's embed generator to set color themes, default language, conversation toggles and much more. +**Note**: This is a stripped down barebones embed method which strips down unnecessary code and should work for both videos and regular Twitter text posts. For [full customization options](https://publish.twitter.com/#) you can use Twitter's embed generator to set color themes, default language, conversation toggles and much more. ## Embed Streamable @@ -498,6 +541,7 @@ vimeoId: putYourIDHere twitchId: putYourIDHere twitchDomain: putYourDomainHere facebookId: putYourIDHere +instagramId: putYourIDhere twitterId: putYourIDHere streamableId: putYourIDHere driveId: putYourIDHere @@ -549,6 +593,16 @@ Example: facebookId: 1243061482783766 {% include facebookPlayer.html id=page.facebookId %} +## Embed Instagram + + + +{% include instagramPlayer.html id=page.instagramId %} + ## Embed Twitter + + + +
+
+ + From 901f1f6a9783462697fbe2321bdb42cbc2a459cb Mon Sep 17 00:00:00 2001 From: Nathan Lam Date: Sat, 6 Aug 2022 18:47:17 -1000 Subject: [PATCH 6/8] Updated instructions on finding video ID and uniform width/height --- README.md | 92 ++++++++++++++++++++++---------- _includes/facebookPlayer.html | 4 +- _includes/googleDrivePlayer.html | 4 +- _includes/linetodayPlayer.html | 2 +- _includes/streamablePlayer.html | 4 +- _includes/twitchPlayer.html | 4 +- _includes/vidioPlayer.html | 2 +- _includes/vimeoPlayer.html | 4 +- _includes/youtubePlayer.html | 2 +- 9 files changed, 77 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 0e69d3d..bcac581 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,15 @@ See the raw text in `example.md` for a complete example. Remember to add in [vid ## Embed YouTube -Create a file in your `_includes` folder called `youtubePlayer.html` with this code inside: +To find the YouTube video ID, click on the desired video to embed. You will get a URL like this: + +``` +https://www.youtube.com/watch?v=lDi9uFcD7XI +``` + +The YouTube video ID would be `lDi9uFcD7XI` + +Next create a file in your `_includes` folder called `youtubePlayer.html` with this code inside: ```html
@@ -34,7 +42,7 @@ Create a file in your `_includes` folder called `youtubePlayer.html` with this c width="700" height="480" frameborder="0" - allowfullscreen=""> + allowfullscreen="true">
``` @@ -55,14 +63,22 @@ youtubeId: putYourIDHere ## Embed Vimeo -Create a file in your `_includes` folder called `vimeoPlayer.html` with this code inside: +To find the Vimeo video ID, click on the desired video to embed. You will get a URL like this: + +``` +https://vimeo.com/22439234 +``` + +The Vimeo video ID would be `22439234` + +Next create a file in your `_includes` folder called `vimeoPlayer.html` with this code inside: ```html
``` @@ -437,7 +471,7 @@ Create a file in your `_includes` folder called `vidioPlayer.html` with this cod height="480" scrolling="no" frameborder="0" - allowfullscreen=""> + allowfullscreen="true">
``` @@ -474,7 +508,7 @@ Create a file in your `_includes` folder called `linetodayPlayer.html` with this width="700" height="480" frameborder="0" - allowfullscreen="" + allowfullscreen="true" allow="autoplay; encrypted-media"> diff --git a/_includes/facebookPlayer.html b/_includes/facebookPlayer.html index ea9290f..f8b457d 100644 --- a/_includes/facebookPlayer.html +++ b/_includes/facebookPlayer.html @@ -13,5 +13,7 @@ class="fb-video" data-href="https://www.facebook.com/watch/?v={{ include.id }}" data-width="auto" - data-allowfullscreen="false"> + width="700" + height="480" + data-allowfullscreen="true"> diff --git a/_includes/googleDrivePlayer.html b/_includes/googleDrivePlayer.html index 2824de6..309810e 100644 --- a/_includes/googleDrivePlayer.html +++ b/_includes/googleDrivePlayer.html @@ -2,10 +2,10 @@
diff --git a/_includes/linetodayPlayer.html b/_includes/linetodayPlayer.html index 68f17b2..05fc28e 100644 --- a/_includes/linetodayPlayer.html +++ b/_includes/linetodayPlayer.html @@ -15,7 +15,7 @@ width="700" height="480" frameborder="0" - allowfullscreen="" + allowfullscreen="true" allow="autoplay; encrypted-media"> diff --git a/_includes/streamablePlayer.html b/_includes/streamablePlayer.html index 362ea3a..331c54b 100644 --- a/_includes/streamablePlayer.html +++ b/_includes/streamablePlayer.html @@ -3,8 +3,8 @@
diff --git a/_includes/vimeoPlayer.html b/_includes/vimeoPlayer.html index 3a393f7..a741721 100644 --- a/_includes/vimeoPlayer.html +++ b/_includes/vimeoPlayer.html @@ -3,8 +3,8 @@
\ No newline at end of file From 14dad6990e51b9c5f45e278efbab32b4b66002aa Mon Sep 17 00:00:00 2001 From: Nathan Lam Date: Sat, 6 Aug 2022 20:41:35 -1000 Subject: [PATCH 7/8] Embed TikTok videos --- README.md | 57 ++++++++++++++++++++++++++++++++++++- _includes/tiktokPlayer.html | 12 ++++++++ 2 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 _includes/tiktokPlayer.html diff --git a/README.md b/README.md index bcac581..a292ce6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # jekyll-embed-video -Embed YouTube, Vimeo, Twitch, Facebook, Instagram, Twitter, Streamable, Google Drive videos/clips and more in Jekyll webpages without a plugin. If you are hosting your webpage using GitHub pages, you can't use third party plugins. Here is a method to use "includes" instead of plugins. +Embed YouTube, Vimeo, Twitch, Facebook, Instagram, Twitter, TikTok, Streamable, Google Drive videos/clips and more in Jekyll webpages without a plugin. If you are hosting your webpage using GitHub pages, you can't use third party plugins. Here is a method to use "includes" instead of plugins. See the raw text in `example.md` for a complete example. Remember to add in [video-embed.css](https://github.com/nathancy/jekyll-embed-video/blob/master/video-embed.css) for [responsive videos](#responsive-videos) that automatically resize with changing window dimensions. @@ -16,6 +16,7 @@ See the raw text in `example.md` for a complete example. Remember to add in [vid * [Embed Facebook](#embed-facebook) * [Embed Instagram](#embed-instagram) * [Embed Twitter](#embed-twitter) +* [Embed TikTok](#embed-tiktok) * [Embed Streamable](#embed-streamable) * [Embed Google Drive](#embed-google-drive) * [Additional support for 20Detik, Dailymotion, Vidio, and LINE Today](#additional-support) @@ -306,6 +307,49 @@ twitterId: putYourIDHere **Note**: This is a stripped down barebones embed method which removes unnecessary code and should work for both videos and regular Twitter text posts. For [full customization options](https://publish.twitter.com/#) you can use Twitter's embed generator to set color themes, default language, conversation toggles and much more. +## Embed TikTok + +To find the TikTok video ID, click on the desired video to embed. You will get a URL like this: + +``` +https://www.tiktok.com/@honeycutepet/video/7032659446199274757?lang=en +``` + +The TikTok ID would be `7032659446199274757` + +Next create a file in your `_includes` folder called `tiktokPlayer.html` with this code inside: + +```html + + +
+ +
+ + +``` + +Place this snippet inside your .md file where you want to embed your tweet: + +```liquid +{% include tiktokPlayer.html id=page.tiktokId %} +``` + +On the top of your .md file, put the TikTok video ID. You could also put the ID of the source directly. + +```yaml +--- +tiktokId: putYourIDHere +--- +``` + +**Note**: This is a stripped down barebones embed method which removes unnecessary code. + ## Embed Streamable To find the Streamable video ID, click on the desired video to embed. You will get a URL like this: @@ -577,6 +621,7 @@ twitchDomain: putYourDomainHere facebookId: putYourIDHere instagramId: putYourIDhere twitterId: putYourIDHere +tiktokId: putYourIDHere streamableId: putYourIDHere driveId: putYourIDHere detikId: putYourIDHere @@ -647,6 +692,16 @@ Example: twitterId: SJosephBurns/status/1555282591665848320 {% include twitterPlayer.html id=page.twitterId %} +## Embed TikTok + + + +{% include tiktokPlayer.html id=page.tiktokId %} + ## Embed Streamable + +
+ +
+ + From 3c9afc5cef8c7657456b2deab22c857a607bb9f5 Mon Sep 17 00:00:00 2001 From: Nathan Lam Date: Sun, 7 Aug 2022 11:05:09 -1000 Subject: [PATCH 8/8] Updated example for embedding Instagram, Twitter, and TikTok --- example.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/example.md b/example.md index 652b42c..66cf2de 100644 --- a/example.md +++ b/example.md @@ -4,6 +4,9 @@ vimeoId: putYourIDHere twitchId: putYourIDHere twitchDomain: putYourDomainHere facebookId: putYourIDHere +instagramId: putYourIDhere +twitterId: putYourIDHere +tiktokId: putYourIDHere streamableId: putYourIDHere driveId: putYourIDHere detikId: putYourIDHere @@ -54,6 +57,36 @@ Example: facebookId: 1243061482783766 {% include facebookPlayer.html id=page.facebookId %} +## Embed Instagram + + + +{% include instagramPlayer.html id=page.instagramId %} + +## Embed Twitter + + + +{% include twitterPlayer.html id=page.twitterId %} + +## Embed TikTok + + + +{% include tiktokPlayer.html id=page.tiktokId %} + ## Embed Streamable