{"id":13904889,"url":"https://github.com/nathancy/jekyll-embed-video","last_synced_at":"2025-04-06T06:12:21.651Z","repository":{"id":46891055,"uuid":"96068339","full_name":"nathancy/jekyll-embed-video","owner":"nathancy","description":"Embed videos in Jekyll webpages without a plugin (Youtube, Vimeo, Twitch, Facebook, Instagram, Twitter, TikTok, Streamable, Google Drive clips + more)","archived":false,"fork":false,"pushed_at":"2022-08-07T21:05:10.000Z","size":44,"stargazers_count":267,"open_issues_count":6,"forks_count":174,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T05:08:36.368Z","etag":null,"topics":["dailymotion","embed-videos","facebook","facebook-api","google-drive-videos","instagram","jekyll","jekyll-blog","jekyll-plugin","jekyll-webpages","responsive-videos","steamable","streamable","tiktok","twitch","twitter","video","vimeo","youtube","youtube-video"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nathancy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-03T03:52:05.000Z","updated_at":"2025-03-15T04:34:32.000Z","dependencies_parsed_at":"2022-08-12T13:10:49.368Z","dependency_job_id":null,"html_url":"https://github.com/nathancy/jekyll-embed-video","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathancy%2Fjekyll-embed-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathancy%2Fjekyll-embed-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathancy%2Fjekyll-embed-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathancy%2Fjekyll-embed-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathancy","download_url":"https://codeload.github.com/nathancy/jekyll-embed-video/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441059,"owners_count":20939239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dailymotion","embed-videos","facebook","facebook-api","google-drive-videos","instagram","jekyll","jekyll-blog","jekyll-plugin","jekyll-webpages","responsive-videos","steamable","streamable","tiktok","twitch","twitter","video","vimeo","youtube","youtube-video"],"created_at":"2024-08-06T23:01:05.539Z","updated_at":"2025-04-06T06:12:21.625Z","avatar_url":"https://github.com/nathancy.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# jekyll-embed-video\n\nEmbed 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.\n\nSee 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.\n\n## Demo\n\n\u003chttp://www.nathan-lam.com/projects/jekyll-embed-video\u003e\n\n## Table of Contents\n\n* [Embed YouTube](#embed-youtube)\n* [Embed Vimeo](#embed-vimeo)\n* [Embed Twitch](#embed-twitch)\n* [Embed Facebook](#embed-facebook)\n* [Embed Instagram](#embed-instagram)\n* [Embed Twitter](#embed-twitter)\n* [Embed TikTok](#embed-tiktok)\n* [Embed Streamable](#embed-streamable)\n* [Embed Google Drive](#embed-google-drive)\n* [Additional support for 20Detik, Dailymotion, Vidio, and LINE Today](#additional-support)\n* [Responsive Videos](#responsive-videos)\n* [Iframe Attributes](#iframe-attributes)\n* [Full Example](#full-example)\n\n## Embed YouTube\n\nTo find the YouTube video ID, click on the desired video to embed. You will get a URL like this:\n\n```\nhttps://www.youtube.com/watch?v=lDi9uFcD7XI\n```\n\nThe YouTube video ID would be `lDi9uFcD7XI`\n\nNext create a file in your `_includes` folder called `youtubePlayer.html` with this code inside:\n\n```html\n\u003cdiv class=\"embed-container\"\u003e\n  \u003ciframe\n      src=\"https://www.youtube.com/embed/{{ include.id }}\"\n      width=\"700\"\n      height=\"480\"\n      frameborder=\"0\"\n      allowfullscreen=\"true\"\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include youtubePlayer.html id=page.youtubeId %}\n```\n\nOn the top of your .md file, put the YouTube video ID. You could also put the ID of the video directly.\n\n```yaml\n---\nyoutubeId: putYourIDHere\n---\n```\n\n## Embed Vimeo\n\nTo find the Vimeo video ID, click on the desired video to embed. You will get a URL like this:\n\n```\nhttps://vimeo.com/22439234\n```\n\nThe Vimeo video ID would be `22439234`\n\nNext create a file in your `_includes` folder called `vimeoPlayer.html` with this code inside:\n\n```html\n\u003cdiv class=\"embed-container\"\u003e\n  \u003ciframe\n      src=\"https://player.vimeo.com/video/{{ include.id }}\"\n      width=\"700\"\n      height=\"480\"\n      frameborder=\"0\"\n      webkitallowfullscreen\n      mozallowfullscreen\n      allowfullscreen\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include vimeoPlayer.html id=page.vimeoId %}\n```\n\nOn the top of your .md file, put the Vimeo video ID. You could also put the ID of the video directly. Take a look at [accessing and editing embed codes](https://vimeo.zendesk.com/hc/en-us/articles/360000710167-Accessing-and-editing-embed-codes) to find your video's embed code ID.\n\n```yaml\n---\nvimeoId: putYourIDHere\n---\n```\n\n## Embed Twitch\n\nTo find the Twitch video ID, click on the desired clip to embed. You will get a URL like this:\n\n```\nhttps://clips.twitch.tv/StylishChillyTubersDancingBaby\n```\n\nThe Twitch video ID would be `StylishChillyTubersDancingBaby`\n\nEmbedding 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:\n\n```html\n\u003cdiv class=\"embed-container\"\u003e\n  \u003ciframe\n      src=\"https://clips.twitch.tv/embed?clip={{ include.id }}\u0026parent={{ include.domain }}\"\n      width=\"700\"\n      height=\"480\"\n      frameborder=\"0\"\n      scrolling=\"no\"\n      allowfullscreen=\"true\"\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include twitchPlayer.html id=page.twitchId domain=page.twitchDomain %}\n```\n\nOn the top of your .md file, put the Twitch video ID and domain name. You could also put the ID of the video directly.\n\n```yaml\n---\ntwitchId: putYourIDHere\ntwitchDomain: putYourDomainHere\n---\n```\n\n**Note**: If you are running your website on a `localhost` server, 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. \n\nSee the [embedding Twitch clips documentation](https://dev.twitch.tv/docs/embed/video-and-clips/#non-interactive-iframes-for-clips) for more details.\n\n## Embed Facebook\n\nThere are two types of Facebook videos/clips that you can embed: videos from the facebook feed using `\u003ciframe\u003e` or the newer Facebook Watch clips using the JavaScript SDK. \n\n#### Standard Facebook feed videos\n\nThe raw `\u003ciframe\u003e` method works but is buggy since its non-standard and rips out the tracking they do. This method may be preferred if you absolutely don't want Facebook to have any tracking. The raw version works but it is very buggy. There's also no easy to way extract the video ID, it's very ugly. \n\nClick the video until it's fullscreen which will give you the option to press the `...` settings button. Next click on `Embed`. This will open up a dialog which will show you the `\u003ciframe\u003e` video code.\n\n**Note:** If you don't fullscreen the video, it will not give you the `Embed` option.\n\nHere's an example of what the non-standard `\u003ciframe\u003e` may look like:\n\n```html\n\u003ciframe src=\"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Falmost.co%2Fvideos%2F986032852221964%2F\u0026width=500\u0026show_text=false\u0026height=500\u0026appId\" width=\"500\" height=\"500\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\" allowFullScreen=\"true\"\u003e\u003c/iframe\u003e\n```\n\nInstead 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.\n\n#### Facebook Watch clips\n\n**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.\n\nFacebook 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` -\u003e `Embed` -\u003e `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:\n\n```\nhttps://www.facebook.com/pokergo/videos/1243061482783766/\n```\n\nIf you already know the link of the specific video, the URL would look like this:\n\n```\nhttps://www.facebook.com/watch/?v=1243061482783766\n```\n\nIn both of these cases, the video ID would be `1243061482783766`. \n\nNext create a file in your `_includes` folder called `facebookPlayer.html` with this code inside:\n\n```html\n\u003c!-- NOTE: Facebook requires you to import their script, probably for tracking. Who knows. \n           Make sure you're okay with doing this otherwise don't use this method! \n           Also note, we don't use the CSS container which we used for other providers such as\n           Youtube since FB handles it on their own --\u003e\n\n\u003c!-- Load Facebook SDK for JavaScript --\u003e\n\u003cdiv id=\"fb-root\"\u003e\u003c/div\u003e\n\u003cscript async defer src=\"https://connect.facebook.net/en_US/sdk.js#xfbml=1\u0026version=v3.2\"\u003e\u003c/script\u003e\n\n\u003c!-- Your embedded video player code --\u003e\n\u003cdiv \n    class=\"fb-video\" \n    data-href=\"https://www.facebook.com/watch/?v={{ include.id }}\"\n    data-width=\"auto\"\n    width=\"700\" \n    height=\"480\"\n    data-allowfullscreen=\"true\"\u003e\n\u003c/div\u003e\n```\n\n**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. \n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include facebookPlayer.html id=page.facebookId %}\n```\n\nOn the top of your .md file, put the Facebook video ID. You could also put the ID of the video directly.\n\n```yaml\n---\nfacebookId: 1243061482783766 \n---\n```\n\nFacebook uses their own video parameters, for more information take a look at the [Embedded Video \u0026 Live Video Player](https://developers.facebook.com/docs/plugins/embedded-video-player/) documentation.\n\n## Embed Instagram\n\nTo find the Instagram video/reel/post ID, click on the desired post to embed. You will get a URL like this:\n\n```\nhttps://www.instagram.com/p/CgdzCoMoUBJ/\n```\n\nThe Instagram ID would be `CgdzCoMoUBJ`\n\nNext create a file in your `_includes` folder called `instagramPlayer.html` with this code inside:\n\n```html\n\u003c!-- NOTE: Instagram requires you to import their script. Also note, we don't \n           use the custom CSS container which we used for other providers such as\n           Youtube since Instagram handles it on their own --\u003e\n\n\u003cblockquote \n  class=\"instagram-media\" \n  data-instgrm-captioned data-instgrm-permalink=\"https://www.instagram.com/reel/{{ include.id }}/\" \n  style=\"max-width:540px; min-width:326px; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);\"\u003e\n\u003c/blockquote\u003e \n\n\u003cscript async src=\"//www.instagram.com/embed.js\"\u003e\u003c/script\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include instagramPlayer.html id=page.instagramId %}\n```\n\nOn the top of your .md file, put the Instagram video/reel/post ID. You could also put the ID of the source directly.\n\n```yaml\n---\ninstagramId: putYourIDHere\n---\n```\n\n**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. \n\n## Embed Twitter\n\nTo find the Twitter video/post ID, click on the desired tweet to embed. You will get a URL like this:\n\n```\nhttps://twitter.com/SJosephBurns/status/1555282591665848320\n```\n\nThe Twitter tweet ID would be `SJosephBurns/status/1555282591665848320`\n\nNext create a file in your `_includes` folder called `twitterPlayer.html` with this code inside:\n\n```html\n\u003c!-- NOTE: Twitter requires you to import their script. Also note, we don't \n           use the custom CSS container which we used for other providers such as\n           Youtube since Twitter handles it on their own --\u003e\n\n\u003cblockquote class=\"twitter-tweet\"\u003e\n  \u003ca href=\"https://twitter.com/{{ include.id }}\"\u003e\u003c/a\u003e\n\u003c/blockquote\u003e \n\n\u003cscript async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your tweet:\n\n```liquid\n{% include twitterPlayer.html id=page.twitterId %}\n```\n\nOn the top of your .md file, put the Twitter tweet ID. You could also put the ID of the source directly.\n\n```yaml\n---\ntwitterId: putYourIDHere\n---\n```\n\n**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. \n\n## Embed TikTok\n\nTo find the TikTok video ID, click on the desired video to embed. You will get a URL like this:\n\n```\nhttps://www.tiktok.com/@honeycutepet/video/7032659446199274757?lang=en\n```\n\nThe TikTok ID would be `7032659446199274757`\n\nNext create a file in your `_includes` folder called `tiktokPlayer.html` with this code inside:\n\n```html\n\u003c!-- NOTE: TikTok requires you to import their script. Also note, we don't \n           use the custom CSS container which we used for other providers such as\n           Youtube since TikTok handles it on their own --\u003e\n\n\u003cblockquote \n  class=\"tiktok-embed\" \n  data-video-id=\"{{ include.id }}\"\n  style=\"border-left: 0px; padding-left: 0px;\"\u003e \n  \u003ca href=\"https://www.tiktok.com/\"\u003e\u003c/a\u003e \n\u003c/blockquote\u003e\n\n\u003cscript async src=\"https://www.tiktok.com/embed.js\"\u003e\u003c/script\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your tweet:\n\n```liquid\n{% include tiktokPlayer.html id=page.tiktokId %}\n```\n\nOn the top of your .md file, put the TikTok video ID. You could also put the ID of the source directly.\n\n```yaml\n---\ntiktokId: putYourIDHere\n---\n```\n\n**Note**: This is a stripped down barebones embed method which removes unnecessary code. \n\n## Embed Streamable\n\nTo find the Streamable video ID, click on the desired video to embed. You will get a URL like this:\n\n```\nhttps://streamable.com/s9ijg\n```\n\nThe Streamable video ID would be `s9ijg`\n\nNext create a file in your `_includes` folder called `streamablePlayer.html` with this code inside:\n\n```html\n\u003cdiv class=\"embed-container\"\u003e\n  \u003ciframe\n      src=\"https://streamable.com/s/{{ include.id }}\"\n      width=\"700\"\n      height=\"480\"\n      frameborder=\"0\"\n      scrolling=\"no\"\n      allowfullscreen=\"true\"\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include streamablePlayer.html id=page.streamableId %}\n```\n\nOn the top of your .md file, put the Streamable video ID. You could also put the ID of the video directly.\n\n```yaml\n---\nstreamableId: putYourIDHere\n---\n```\n\nYou could also find the embed video ID with [Streamable's free online tool](https://streamable.com/embed-video)\n\n## Embed Google Drive\n\n**Recommendation:** Upload your video to YouTube instead and use the [embed YouTube method](#embed-youtube) since it has better built in video player functionality.\n\nEmbedding Google Drive videos have additional steps.\n\n1. For the desired video, change the link sharing setting to `On - Anyone with the link`. This will make the video accessible to anyone who has the link as no sign-in is required.\n  \n   **Important**: If you do not change the video setting to this option, your video will not show.\n  \n2. Double click the video to show the preview. Click the setting options and select \"Open in new window\". Now click on the setting option again and select \"Embed item\". The iframe code should appear. For example:\n\n```html\n\u003ciframe src=\"https://drive.google.com/file/d/1EC8BnjJMon-vqy-UhLKk9sf_oukZzEbP/preview\"\u003e\u003c/iframe\u003e\n```\n\n`1EC8BnjJMon-vqy-UhLKk9sf_oukZzEbP/preview` would be your video ID.\n\n**Note**: Right clicking the video will not bring up the embed option. You must open the video in a new window.\n\nCreate a file in your `_includes` folder called `googleDrivePlayer.html` with this code inside:\n\n```html\n\u003cdiv class=\"embed-container\"\u003e\n  \u003ciframe\n      width=\"700\"\n      height=\"480\"\n      src=\"https://drive.google.com/file/d/{{ include.id }}\"\n      frameborder=\"0\"\n      allowfullscreen=\"true\"\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include googleDrivePlayer.html id=page.driveId %}\n```\n\nOn the top of your .md file, put the Google Drive video ID. You could also put the ID of the video directly.\n\n```yaml\n---\ndriveId: putYourIDHere\n---\n```\n\n## Additional support\n\n### Embed 20Detik\n\nCreate a file in your `_includes` folder called `20detikPlayer.html` with this code inside:\n\n```html\n\u003cdiv class=\"embed-container\"\u003e\n  \u003ciframe\n      src=\"https://20.detik.com/embed/{{ include.id }}\"\n      width=\"700\"\n      height=\"480\"\n      frameborder=\"0\"\n      scrolling=\"no\"\n      allowfullscreen=\"true\"\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include 20detikPlayer.html id=page.detikId %}\n```\n\nOn the top of your .md file, put the Detik video ID. You could also put the ID of the video directly.\n\n```yaml\n---\ndetikId: 190130051\n---\n```\n\n### Embed Dailymotion\n\nCreate a file in your `_includes` folder called `dailymotionPlayer.html` with this code inside:\n\n```html\n\u003cdiv class=\"embed-container\"\u003e\n  \u003ciframe\n      src=\"https://www.dailymotion.com/embed/video/{{ include.id }}\"\n      width=\"700\"\n      height=\"480\"\n      frameborder=\"0\"\n      allowfullscreen=\"\"\n      allow=\"autoplay\"\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include dailymotionPlayer.html id=page.dailymotionId %}\n```\n\nOn the top of your .md file, put the Dailymotion video ID. You could also put the ID of the video directly.\n\n```yaml\n---\ndailymotionId: x2btuie\n---\n```\n\n### Embed Vidio\n\nCreate a file in your `_includes` folder called `vidioPlayer.html` with this code inside:\n\n```html\n\u003cdiv class=\"embed-container\"\u003e\n  \u003ciframe\n      src=\"https://www.vidio.com/embed/{{ include.id }}\"\n      width=\"700\"\n      height=\"480\"\n      scrolling=\"no\"\n      frameborder=\"0\"\n      allowfullscreen=\"true\"\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include vidioPlayer.html id=page.vidioId %}\n```\n\nOn the top of your .md file, put the Vidio video ID. You could also put the ID of the video directly.\n\n```yaml\n---\nvidioId: 1671743\n---\n```\n\n### Embed LINE Today\n\nLINE Today contents are served in different countries so another `country` parameter (to be filled with a 2-letter country code) is needed. Here's all the supported country codes (case-insensitive)\n\n* `hk` - Hong Kong\n* `id` - Indonesia\n* `th` - Thailand\n* `tw` - Taiwan\n\nCreate a file in your `_includes` folder called `linetodayPlayer.html` with this code inside:\n\n```html\n\u003cdiv class=\"embed-container\"\u003e\n  \u003ciframe\n      src=\"https://today.line.me/{{ include.country }}/embed/{{ include.id }}\"\n      width=\"700\"\n      height=\"480\"\n      frameborder=\"0\"\n      allowfullscreen=\"true\"\n      allow=\"autoplay; encrypted-media\"\u003e\n  \u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nPlace this snippet inside your .md file where you want to embed your video:\n\n```liquid\n{% include linetodayPlayer.html id=page.linetodayId country=page.countryId %}\n```\n\nOn the top of your .md file, put the LINE Today video and country ID. You could also put the IDs directly.\n\n```yaml\n---\nlinetodayId: abcdefg \ncountryId: hk\n---\n```\n\n## Responsive Videos\n\nFor responsive videos that automatically resize with changing window sizes, add in `video-embed.css`.\n\n```css\n.embed-container {\n  position: relative;\n  padding-bottom: 56.25%;\n  height: 0;\n  overflow: hidden;\n  max-width: 100%;\n}\n\n.embed-container iframe, .embed-container object, .embed-container embed {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n```\n\n## Iframe Attributes\n\nThese attributes are defined in the [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe). You can set various additional attributes no matter what provider you use.\n\nName              | Type    | Description\n:---------------- | :------ | :----------\n`allowfullscreen` | boolean | If `true`, the player can go full screen.\n`height`          | integer | Height of the embedded window, in pixels.\n`width`           | integer | Width of the embedded window, in pixels.\n`scrolling`       | boolean | Indicates when the browser should provide a scroll bar (or other scrolling device) for the frame. Recommended: `no`.\n`src`             | string  | The video/clip source URL link.\n`autoplay`        | boolean | If `true`, the video starts playing automatically, without the user clicking play. The exception is mobile devices, on which video cannot be played without user interaction. Default: `true`.\n`muted`           | boolean | Specifies whether the initial state of the video is muted. Default: `false`.\n`time`            | 1h2m3s  | Time in the video where playback starts. Specifies hours, minutes, and seconds. Default: 0h0m0s (the start of the video).\n\n## Full example\n\n```markdown\n---\nyoutubeId: putYourIDHere\nvimeoId: putYourIDHere\ntwitchId: putYourIDHere\ntwitchDomain: putYourDomainHere\nfacebookId: putYourIDHere\ninstagramId: putYourIDhere\ntwitterId: putYourIDHere\ntiktokId: putYourIDHere\nstreamableId: putYourIDHere\ndriveId: putYourIDHere\ndetikId: putYourIDHere\ndailymotionId: putYourIDHere\nvidioId: putYourIDHere\nlinetodayId: putYourIDHere\ncountryId: putYourIDHere\n---\n\n## Embed Youtube\n\n\u003c!---\nInclude this next line in your .md for Youtube videos, make sure to put your video ID up there!\n\nExample:     youtubeId: lDi9uFcD7XI\n--\u003e\n\n{% include youtubePlayer.html id=page.youtubeId %}\n\n## Embed Vimeo\n\n\u003c!---\nInclude this next line in your .md file for Vimeo videos, make sure to put your video ID up there!\n\nExample:     vimeoID: 22439234\n--\u003e\n\n{% include vimeoPlayer.html id=page.vimeoId %}\n\n## Embed Twitch\n\n\u003c!---\nInclude this next line in your .md file for Twitch videos, make sure to put your video ID and domain up there!\n\nExample:     twitchId: GrotesqueArbitraryGullPupper\n             twitchDomain: www.nathan-lam.com\n--\u003e\n\n{% include twitchPlayer.html id=page.twitchId domain=page.twitchDomain %}\n\n## Embed Facebook\n\n\u003c!---\nInclude this next line in your .md file for Facebook videos, make sure to put your video ID up there!\n\nExample:     facebookId: 1243061482783766 \n--\u003e\n\n{% include facebookPlayer.html id=page.facebookId %}\n\n## Embed Instagram\n\n\u003c!---\nInclude this next line in your .md file for Instagram videos/reels/posts, make sure to put your video ID up there!\n\nExample:     instagramId: CgdzCoMoUBJ \n--\u003e\n\n{% include instagramPlayer.html id=page.instagramId %}\n\n## Embed Twitter\n\n\u003c!---\nInclude this next line in your .md file for Twitter videos/posts, make sure to put your video ID up there!\n\nExample:     twitterId: SJosephBurns/status/1555282591665848320 \n--\u003e\n\n{% include twitterPlayer.html id=page.twitterId %}\n\n## Embed TikTok\n\n\u003c!---\nInclude this next line in your .md file for TikTok videos, make sure to put your video ID up there!\n\nExample:     tiktokId: 7101489125244652806 \n--\u003e\n\n{% include tiktokPlayer.html id=page.tiktokId %}\n\n## Embed Streamable\n\n\u003c!---\nInclude this next line in your .md file for Streamable videos, make sure to put your video ID up there!\n\nExample:     streamableId: s9ijg \n--\u003e\n\n{% include streamablePlayer.html id=page.streamableId %}\n\n## Embed Google Drive\n\n\u003c!---\nInclude this next line in your .md file for Google Drive videos, make sure to put your video ID up there!\n\nExample:     driveId: 0B7L_dMcaZknxVTRndmdSQ0F5OFE/preview\n--\u003e\n\n{% include googleDrivePlayer.html id=page.driveId %}\n\n## Embed 20Detik\n\n\u003c!---\nInclude this next line in your .md file for 20Detik videos, make sure to put your video ID up there!\n\nExample:     detikId: 190130051\n--\u003e\n\n{% include 20detikPlayer.html id=page.detikId %}\n\n## Embed Dailymotion\n\n\u003c!---\nInclude this next line in your .md file for Dailymotion videos, make sure to put your video ID up there!\n\nExample:     dailymotionId: x2btuie\n--\u003e\n\n{% include dailymotionPlayer.html id=page.dailymotionId %}\n\n## Embed Vidio\n\n\u003c!---\nInclude this next line in your .md file for Vidio videos, make sure to put your video ID up there!\n\nExample:     vidioId: 1671743\n--\u003e\n\n{% include vidioPlayer.html id=page.vidioId %}\n\n## Embed LINE Today\n\n\u003c!---\nInclude these next lines in your .md file for LINE Today videos, make sure to put your video and country ID up there!\n\nExample:     linetodayId: abcdefg \n             countryId: hk\n--\u003e\n\n{% include linetodayPlayer.html id=page.linetodayId country=page.countryId %}\n```\n\n## Contributing \n\nFeel free to open an issue or pull request ticket if any of the existing video embed methods break or if there are any other requests to support new video stream providers","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathancy%2Fjekyll-embed-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathancy%2Fjekyll-embed-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathancy%2Fjekyll-embed-video/lists"}