@@ -31,7 +43,7 @@ Create a file in your `_includes` folder called `youtubePlayer.html` with this c
width="700"
height="480"
frameborder="0"
- allowfullscreen="">
+ allowfullscreen="true">
```
@@ -52,14 +64,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
+```
+
+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 `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 Instagram
+
+To find the Instagram video/reel/post ID, click on the desired post to embed. You will get a URL like this:
+
+```
+https://www.instagram.com/p/CgdzCoMoUBJ/
+```
+
+The Instagram 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 harvest has been attempted to be removed as much as possible without affecting the embed behavior. Also be aware that you must include the Instagram JavaScript for embedding to work. This may have some spooky tracking unfortunately.
+
+## Embed Twitter
+
+To find the Twitter video/post ID, click on the desired tweet to embed. You will get a URL like this:
+
+```
+https://twitter.com/SJosephBurns/status/1555282591665848320
+```
+
+The Twitter tweet 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 tweet:
+
+```liquid
+{% include twitterPlayer.html id=page.twitterId %}
+```
+
+On the top of your .md file, put the Twitter tweet ID. You could also put the ID of the source directly.
+
+```yaml
+---
+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
-Create a file in your `_includes` folder called `streamablePlayer.html` with this code inside:
+To find the Streamable video ID, click on the desired video to embed. You will get a URL like this:
+
+```
+https://streamable.com/s9ijg
+```
+
+The Streamable video ID would be `s9ijg`
+
+Next create a file in your `_includes` folder called `streamablePlayer.html` with this code inside:
```html
```
@@ -273,7 +515,7 @@ Create a file in your `_includes` folder called `vidioPlayer.html` with this cod
height="480"
scrolling="no"
frameborder="0"
- allowfullscreen="">
+ allowfullscreen="true">
```
@@ -310,7 +552,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">
@@ -372,12 +614,15 @@ Name | Type | Description
```markdown
---
-title: "Full Example"
youtubeId: putYourIDHere
vimeoId: putYourIDHere
twitchId: putYourIDHere
+twitchDomain: putYourDomainHere
+facebookId: putYourIDHere
+instagramId: putYourIDhere
+twitterId: putYourIDHere
+tiktokId: putYourIDHere
streamableId: putYourIDHere
-mixerId: putYourIDHere
driveId: putYourIDHere
detikId: putYourIDHere
dailymotionId: putYourIDHere
@@ -417,6 +662,46 @@ Example: twitchId: GrotesqueArbitraryGullPupper
{% include twitchPlayer.html id=page.twitchId domain=page.twitchDomain %}
+## Embed Facebook
+
+
+
+{% 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
+
+
+
+