├── .gitignore ├── LICENSE ├── README.md ├── _includes ├── 20detikPlayer.html ├── dailymotionPlayer.html ├── facebookPlayer.html ├── googleDrivePlayer.html ├── instagramPlayer.html ├── linetodayPlayer.html ├── streamablePlayer.html ├── tiktokPlayer.html ├── twitchPlayer.html ├── twitterPlayer.html ├── vidioPlayer.html ├── vimeoPlayer.html └── youtubePlayer.html ├── example.md └── video-embed.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore IntelliJ Project files. 2 | *.iml 3 | .idea/ 4 | 5 | # If on a Mac, ignore DS_Store. 6 | .DS_Store 7 | 8 | # Build node_modules locally. 9 | node_modules/ 10 | 11 | # Ignore the debug log generated when, for example, ESLint fails. 12 | npm-debug.log 13 | 14 | _site 15 | .sass-cache 16 | .jekyll-metadata 17 | 18 | logs 19 | *.log 20 | project/project 21 | project/target 22 | .target 23 | target 24 | tmp 25 | .cache 26 | .history 27 | .idea 28 | /*.iml 29 | /out 30 | /.idea_modules 31 | /.classpath 32 | /.project 33 | /RUNNING_PID 34 | /.settings 35 | /bin 36 | conf/rc.application.conf 37 | conf/rc.deployment.secret 38 | conf/live.application.conf 39 | conf/live.deployment.secret 40 | /target/ 41 | .DS_Store 42 | 43 | # User-specific stuff: 44 | .idea/workspace.xml 45 | .idea/tasks.xml 46 | .idea/dictionaries 47 | .idea/vcs.xml 48 | .idea/jsLibraryMappings.xml 49 | 50 | # Sensitive or high-churn files: 51 | .idea/dataSources.ids 52 | .idea/dataSources.xml 53 | .idea/dataSources.local.xml 54 | .idea/sqlDataSources.xml 55 | .idea/dynamic.xml 56 | .idea/uiDesigner.xml 57 | 58 | # Gradle: 59 | .idea/gradle.xml 60 | .idea/libraries 61 | 62 | # Mongo Explorer plugin: 63 | .idea/mongoSettings.xml 64 | 65 | ## File-based project format: 66 | *.iws 67 | 68 | ## Plugin-specific files: 69 | 70 | # IntelliJ 71 | /out/ 72 | 73 | # mpeltonen/sbt-idea plugin 74 | .idea_modules/ 75 | 76 | # JIRA plugin 77 | atlassian-ide-plugin.xml 78 | 79 | # Crashlytics plugin (for Android Studio and IntelliJ) 80 | com_crashlytics_export_strings.xml 81 | crashlytics.properties 82 | crashlytics-build.properties 83 | fabric.properties 84 | 85 | *.iml 86 | 87 | # jekyll 88 | _site 89 | *.DS_Store 90 | *.sublime-project 91 | *.sublime-workspace 92 | codekit-config.json 93 | node_modules 94 | .sass-cache 95 | .idea 96 | *.iml 97 | s3_website.yml 98 | .assets-cache -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Nathan Lam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jekyll-embed-video 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | ## Demo 8 | 9 | 10 | 11 | ## Table of Contents 12 | 13 | * [Embed YouTube](#embed-youtube) 14 | * [Embed Vimeo](#embed-vimeo) 15 | * [Embed Twitch](#embed-twitch) 16 | * [Embed Facebook](#embed-facebook) 17 | * [Embed Instagram](#embed-instagram) 18 | * [Embed Twitter](#embed-twitter) 19 | * [Embed TikTok](#embed-tiktok) 20 | * [Embed Streamable](#embed-streamable) 21 | * [Embed Google Drive](#embed-google-drive) 22 | * [Additional support for 20Detik, Dailymotion, Vidio, and LINE Today](#additional-support) 23 | * [Responsive Videos](#responsive-videos) 24 | * [Iframe Attributes](#iframe-attributes) 25 | * [Full Example](#full-example) 26 | 27 | ## Embed YouTube 28 | 29 | To find the YouTube video ID, click on the desired video to embed. You will get a URL like this: 30 | 31 | ``` 32 | https://www.youtube.com/watch?v=lDi9uFcD7XI 33 | ``` 34 | 35 | The YouTube video ID would be `lDi9uFcD7XI` 36 | 37 | Next create a file in your `_includes` folder called `youtubePlayer.html` with this code inside: 38 | 39 | ```html 40 |
41 | 48 |
49 | ``` 50 | 51 | Place this snippet inside your .md file where you want to embed your video: 52 | 53 | ```liquid 54 | {% include youtubePlayer.html id=page.youtubeId %} 55 | ``` 56 | 57 | On the top of your .md file, put the YouTube video ID. You could also put the ID of the video directly. 58 | 59 | ```yaml 60 | --- 61 | youtubeId: putYourIDHere 62 | --- 63 | ``` 64 | 65 | ## Embed Vimeo 66 | 67 | To find the Vimeo video ID, click on the desired video to embed. You will get a URL like this: 68 | 69 | ``` 70 | https://vimeo.com/22439234 71 | ``` 72 | 73 | The Vimeo video ID would be `22439234` 74 | 75 | Next create a file in your `_includes` folder called `vimeoPlayer.html` with this code inside: 76 | 77 | ```html 78 |
79 | 88 |
89 | ``` 90 | 91 | Place this snippet inside your .md file where you want to embed your video: 92 | 93 | ```liquid 94 | {% include vimeoPlayer.html id=page.vimeoId %} 95 | ``` 96 | 97 | On 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. 98 | 99 | ```yaml 100 | --- 101 | vimeoId: putYourIDHere 102 | --- 103 | ``` 104 | 105 | ## Embed Twitch 106 | 107 | To find the Twitch video ID, click on the desired clip to embed. You will get a URL like this: 108 | 109 | ``` 110 | https://clips.twitch.tv/StylishChillyTubersDancingBaby 111 | ``` 112 | 113 | The Twitch video ID would be `StylishChillyTubersDancingBaby` 114 | 115 | 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: 116 | 117 | ```html 118 |
119 | 127 |
128 | ``` 129 | 130 | Place this snippet inside your .md file where you want to embed your video: 131 | 132 | ```liquid 133 | {% include twitchPlayer.html id=page.twitchId domain=page.twitchDomain %} 134 | ``` 135 | 136 | On the top of your .md file, put the Twitch video ID and domain name. You could also put the ID of the video directly. 137 | 138 | ```yaml 139 | --- 140 | twitchId: putYourIDHere 141 | twitchDomain: putYourDomainHere 142 | --- 143 | ``` 144 | 145 | **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. 146 | 147 | See the [embedding Twitch clips documentation](https://dev.twitch.tv/docs/embed/video-and-clips/#non-interactive-iframes-for-clips) for more details. 148 | 149 | ## Embed Facebook 150 | 151 | There are two types of Facebook videos/clips that you can embed: videos from the facebook feed using ` 165 | ``` 166 | 167 | 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. 168 | 169 | #### Facebook Watch clips 170 | 171 | **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. 172 | 173 | 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: 174 | 175 | ``` 176 | https://www.facebook.com/pokergo/videos/1243061482783766/ 177 | ``` 178 | 179 | If you already know the link of the specific video, the URL would look like this: 180 | 181 | ``` 182 | https://www.facebook.com/watch/?v=1243061482783766 183 | ``` 184 | 185 | In both of these cases, the video ID would be `1243061482783766`. 186 | 187 | Next create a file in your `_includes` folder called `facebookPlayer.html` with this code inside: 188 | 189 | ```html 190 | 194 | 195 | 196 |
197 | 198 | 199 | 200 |
207 |
208 | ``` 209 | 210 | **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. 211 | 212 | Place this snippet inside your .md file where you want to embed your video: 213 | 214 | ```liquid 215 | {% include facebookPlayer.html id=page.facebookId %} 216 | ``` 217 | 218 | On the top of your .md file, put the Facebook video ID. You could also put the ID of the video directly. 219 | 220 | ```yaml 221 | --- 222 | facebookId: 1243061482783766 223 | --- 224 | ``` 225 | 226 | 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. 227 | 228 | ## Embed Instagram 229 | 230 | To find the Instagram video/reel/post ID, click on the desired post to embed. You will get a URL like this: 231 | 232 | ``` 233 | https://www.instagram.com/p/CgdzCoMoUBJ/ 234 | ``` 235 | 236 | The Instagram ID would be `CgdzCoMoUBJ` 237 | 238 | Next create a file in your `_includes` folder called `instagramPlayer.html` with this code inside: 239 | 240 | ```html 241 | 244 | 245 |
249 |
250 | 251 | 252 | ``` 253 | 254 | Place this snippet inside your .md file where you want to embed your video: 255 | 256 | ```liquid 257 | {% include instagramPlayer.html id=page.instagramId %} 258 | ``` 259 | 260 | On the top of your .md file, put the Instagram video/reel/post ID. You could also put the ID of the source directly. 261 | 262 | ```yaml 263 | --- 264 | instagramId: putYourIDHere 265 | --- 266 | ``` 267 | 268 | **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. 269 | 270 | ## Embed Twitter 271 | 272 | To find the Twitter video/post ID, click on the desired tweet to embed. You will get a URL like this: 273 | 274 | ``` 275 | https://twitter.com/SJosephBurns/status/1555282591665848320 276 | ``` 277 | 278 | The Twitter tweet ID would be `SJosephBurns/status/1555282591665848320` 279 | 280 | Next create a file in your `_includes` folder called `twitterPlayer.html` with this code inside: 281 | 282 | ```html 283 | 286 | 287 |
288 | 289 |
290 | 291 | 292 | ``` 293 | 294 | Place this snippet inside your .md file where you want to embed your tweet: 295 | 296 | ```liquid 297 | {% include twitterPlayer.html id=page.twitterId %} 298 | ``` 299 | 300 | On the top of your .md file, put the Twitter tweet ID. You could also put the ID of the source directly. 301 | 302 | ```yaml 303 | --- 304 | twitterId: putYourIDHere 305 | --- 306 | ``` 307 | 308 | **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. 309 | 310 | ## Embed TikTok 311 | 312 | To find the TikTok video ID, click on the desired video to embed. You will get a URL like this: 313 | 314 | ``` 315 | https://www.tiktok.com/@honeycutepet/video/7032659446199274757?lang=en 316 | ``` 317 | 318 | The TikTok ID would be `7032659446199274757` 319 | 320 | Next create a file in your `_includes` folder called `tiktokPlayer.html` with this code inside: 321 | 322 | ```html 323 | 326 | 327 |
331 | 332 |
333 | 334 | 335 | ``` 336 | 337 | Place this snippet inside your .md file where you want to embed your tweet: 338 | 339 | ```liquid 340 | {% include tiktokPlayer.html id=page.tiktokId %} 341 | ``` 342 | 343 | On the top of your .md file, put the TikTok video ID. You could also put the ID of the source directly. 344 | 345 | ```yaml 346 | --- 347 | tiktokId: putYourIDHere 348 | --- 349 | ``` 350 | 351 | **Note**: This is a stripped down barebones embed method which removes unnecessary code. 352 | 353 | ## Embed Streamable 354 | 355 | To find the Streamable video ID, click on the desired video to embed. You will get a URL like this: 356 | 357 | ``` 358 | https://streamable.com/s9ijg 359 | ``` 360 | 361 | The Streamable video ID would be `s9ijg` 362 | 363 | Next create a file in your `_includes` folder called `streamablePlayer.html` with this code inside: 364 | 365 | ```html 366 |
367 | 375 |
376 | ``` 377 | 378 | Place this snippet inside your .md file where you want to embed your video: 379 | 380 | ```liquid 381 | {% include streamablePlayer.html id=page.streamableId %} 382 | ``` 383 | 384 | On the top of your .md file, put the Streamable video ID. You could also put the ID of the video directly. 385 | 386 | ```yaml 387 | --- 388 | streamableId: putYourIDHere 389 | --- 390 | ``` 391 | 392 | You could also find the embed video ID with [Streamable's free online tool](https://streamable.com/embed-video) 393 | 394 | ## Embed Google Drive 395 | 396 | **Recommendation:** Upload your video to YouTube instead and use the [embed YouTube method](#embed-youtube) since it has better built in video player functionality. 397 | 398 | Embedding Google Drive videos have additional steps. 399 | 400 | 1. 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. 401 | 402 | **Important**: If you do not change the video setting to this option, your video will not show. 403 | 404 | 2. 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: 405 | 406 | ```html 407 | 408 | ``` 409 | 410 | `1EC8BnjJMon-vqy-UhLKk9sf_oukZzEbP/preview` would be your video ID. 411 | 412 | **Note**: Right clicking the video will not bring up the embed option. You must open the video in a new window. 413 | 414 | Create a file in your `_includes` folder called `googleDrivePlayer.html` with this code inside: 415 | 416 | ```html 417 |
418 | 425 |
426 | ``` 427 | 428 | Place this snippet inside your .md file where you want to embed your video: 429 | 430 | ```liquid 431 | {% include googleDrivePlayer.html id=page.driveId %} 432 | ``` 433 | 434 | On the top of your .md file, put the Google Drive video ID. You could also put the ID of the video directly. 435 | 436 | ```yaml 437 | --- 438 | driveId: putYourIDHere 439 | --- 440 | ``` 441 | 442 | ## Additional support 443 | 444 | ### Embed 20Detik 445 | 446 | Create a file in your `_includes` folder called `20detikPlayer.html` with this code inside: 447 | 448 | ```html 449 |
450 | 458 |
459 | ``` 460 | 461 | Place this snippet inside your .md file where you want to embed your video: 462 | 463 | ```liquid 464 | {% include 20detikPlayer.html id=page.detikId %} 465 | ``` 466 | 467 | On the top of your .md file, put the Detik video ID. You could also put the ID of the video directly. 468 | 469 | ```yaml 470 | --- 471 | detikId: 190130051 472 | --- 473 | ``` 474 | 475 | ### Embed Dailymotion 476 | 477 | Create a file in your `_includes` folder called `dailymotionPlayer.html` with this code inside: 478 | 479 | ```html 480 |
481 | 489 |
490 | ``` 491 | 492 | Place this snippet inside your .md file where you want to embed your video: 493 | 494 | ```liquid 495 | {% include dailymotionPlayer.html id=page.dailymotionId %} 496 | ``` 497 | 498 | On the top of your .md file, put the Dailymotion video ID. You could also put the ID of the video directly. 499 | 500 | ```yaml 501 | --- 502 | dailymotionId: x2btuie 503 | --- 504 | ``` 505 | 506 | ### Embed Vidio 507 | 508 | Create a file in your `_includes` folder called `vidioPlayer.html` with this code inside: 509 | 510 | ```html 511 |
512 | 520 |
521 | ``` 522 | 523 | Place this snippet inside your .md file where you want to embed your video: 524 | 525 | ```liquid 526 | {% include vidioPlayer.html id=page.vidioId %} 527 | ``` 528 | 529 | On the top of your .md file, put the Vidio video ID. You could also put the ID of the video directly. 530 | 531 | ```yaml 532 | --- 533 | vidioId: 1671743 534 | --- 535 | ``` 536 | 537 | ### Embed LINE Today 538 | 539 | LINE 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) 540 | 541 | * `hk` - Hong Kong 542 | * `id` - Indonesia 543 | * `th` - Thailand 544 | * `tw` - Taiwan 545 | 546 | Create a file in your `_includes` folder called `linetodayPlayer.html` with this code inside: 547 | 548 | ```html 549 |
550 | 558 |
559 | ``` 560 | 561 | Place this snippet inside your .md file where you want to embed your video: 562 | 563 | ```liquid 564 | {% include linetodayPlayer.html id=page.linetodayId country=page.countryId %} 565 | ``` 566 | 567 | On the top of your .md file, put the LINE Today video and country ID. You could also put the IDs directly. 568 | 569 | ```yaml 570 | --- 571 | linetodayId: abcdefg 572 | countryId: hk 573 | --- 574 | ``` 575 | 576 | ## Responsive Videos 577 | 578 | For responsive videos that automatically resize with changing window sizes, add in `video-embed.css`. 579 | 580 | ```css 581 | .embed-container { 582 | position: relative; 583 | padding-bottom: 56.25%; 584 | height: 0; 585 | overflow: hidden; 586 | max-width: 100%; 587 | } 588 | 589 | .embed-container iframe, .embed-container object, .embed-container embed { 590 | position: absolute; 591 | top: 0; 592 | left: 0; 593 | width: 100%; 594 | height: 100%; 595 | } 596 | ``` 597 | 598 | ## Iframe Attributes 599 | 600 | These 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. 601 | 602 | Name | Type | Description 603 | :---------------- | :------ | :---------- 604 | `allowfullscreen` | boolean | If `true`, the player can go full screen. 605 | `height` | integer | Height of the embedded window, in pixels. 606 | `width` | integer | Width of the embedded window, in pixels. 607 | `scrolling` | boolean | Indicates when the browser should provide a scroll bar (or other scrolling device) for the frame. Recommended: `no`. 608 | `src` | string | The video/clip source URL link. 609 | `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`. 610 | `muted` | boolean | Specifies whether the initial state of the video is muted. Default: `false`. 611 | `time` | 1h2m3s | Time in the video where playback starts. Specifies hours, minutes, and seconds. Default: 0h0m0s (the start of the video). 612 | 613 | ## Full example 614 | 615 | ```markdown 616 | --- 617 | youtubeId: putYourIDHere 618 | vimeoId: putYourIDHere 619 | twitchId: putYourIDHere 620 | twitchDomain: putYourDomainHere 621 | facebookId: putYourIDHere 622 | instagramId: putYourIDhere 623 | twitterId: putYourIDHere 624 | tiktokId: putYourIDHere 625 | streamableId: putYourIDHere 626 | driveId: putYourIDHere 627 | detikId: putYourIDHere 628 | dailymotionId: putYourIDHere 629 | vidioId: putYourIDHere 630 | linetodayId: putYourIDHere 631 | countryId: putYourIDHere 632 | --- 633 | 634 | ## Embed Youtube 635 | 636 | 641 | 642 | {% include youtubePlayer.html id=page.youtubeId %} 643 | 644 | ## Embed Vimeo 645 | 646 | 651 | 652 | {% include vimeoPlayer.html id=page.vimeoId %} 653 | 654 | ## Embed Twitch 655 | 656 | 662 | 663 | {% include twitchPlayer.html id=page.twitchId domain=page.twitchDomain %} 664 | 665 | ## Embed Facebook 666 | 667 | 672 | 673 | {% include facebookPlayer.html id=page.facebookId %} 674 | 675 | ## Embed Instagram 676 | 677 | 682 | 683 | {% include instagramPlayer.html id=page.instagramId %} 684 | 685 | ## Embed Twitter 686 | 687 | 692 | 693 | {% include twitterPlayer.html id=page.twitterId %} 694 | 695 | ## Embed TikTok 696 | 697 | 702 | 703 | {% include tiktokPlayer.html id=page.tiktokId %} 704 | 705 | ## Embed Streamable 706 | 707 | 712 | 713 | {% include streamablePlayer.html id=page.streamableId %} 714 | 715 | ## Embed Google Drive 716 | 717 | 722 | 723 | {% include googleDrivePlayer.html id=page.driveId %} 724 | 725 | ## Embed 20Detik 726 | 727 | 732 | 733 | {% include 20detikPlayer.html id=page.detikId %} 734 | 735 | ## Embed Dailymotion 736 | 737 | 742 | 743 | {% include dailymotionPlayer.html id=page.dailymotionId %} 744 | 745 | ## Embed Vidio 746 | 747 | 752 | 753 | {% include vidioPlayer.html id=page.vidioId %} 754 | 755 | ## Embed LINE Today 756 | 757 | 763 | 764 | {% include linetodayPlayer.html id=page.linetodayId country=page.countryId %} 765 | ``` 766 | 767 | ## Contributing 768 | 769 | Feel 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 -------------------------------------------------------------------------------- /_includes/20detikPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 12 |
13 | -------------------------------------------------------------------------------- /_includes/dailymotionPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 12 |
13 | -------------------------------------------------------------------------------- /_includes/facebookPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
19 |
20 | -------------------------------------------------------------------------------- /_includes/googleDrivePlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 11 |
12 | -------------------------------------------------------------------------------- /_includes/instagramPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /_includes/linetodayPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 11 | 12 |
13 | 21 |
22 | -------------------------------------------------------------------------------- /_includes/streamablePlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 12 |
13 | -------------------------------------------------------------------------------- /_includes/tiktokPlayer.html: -------------------------------------------------------------------------------- 1 | 4 | 5 |
9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /_includes/twitchPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 16 | 17 | 18 | 19 |
20 | 28 |
29 | -------------------------------------------------------------------------------- /_includes/twitterPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |
8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /_includes/vidioPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 12 |
13 | -------------------------------------------------------------------------------- /_includes/vimeoPlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 13 |
-------------------------------------------------------------------------------- /_includes/youtubePlayer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 11 |
-------------------------------------------------------------------------------- /example.md: -------------------------------------------------------------------------------- 1 | --- 2 | youtubeId: putYourIDHere 3 | vimeoId: putYourIDHere 4 | twitchId: putYourIDHere 5 | twitchDomain: putYourDomainHere 6 | facebookId: putYourIDHere 7 | instagramId: putYourIDhere 8 | twitterId: putYourIDHere 9 | tiktokId: putYourIDHere 10 | streamableId: putYourIDHere 11 | driveId: putYourIDHere 12 | detikId: putYourIDHere 13 | dailymotionId: putYourIDHere 14 | vidioId: putYourIDHere 15 | linetodayId: putYourIDHere 16 | countryId: putYourIDHere 17 | --- 18 | 19 | ## Embed Youtube 20 | 21 | 26 | 27 | {% include youtubePlayer.html id=page.youtubeId %} 28 | 29 | ## Embed Vimeo 30 | 31 | 36 | 37 | {% include vimeoPlayer.html id=page.vimeoId %} 38 | 39 | ## Embed Twitch 40 | 41 | 47 | 48 | {% include twitchPlayer.html id=page.twitchId domain=page.twitchDomain %} 49 | 50 | ## Embed Facebook 51 | 52 | 57 | 58 | {% include facebookPlayer.html id=page.facebookId %} 59 | 60 | ## Embed Instagram 61 | 62 | 67 | 68 | {% include instagramPlayer.html id=page.instagramId %} 69 | 70 | ## Embed Twitter 71 | 72 | 77 | 78 | {% include twitterPlayer.html id=page.twitterId %} 79 | 80 | ## Embed TikTok 81 | 82 | 87 | 88 | {% include tiktokPlayer.html id=page.tiktokId %} 89 | 90 | ## Embed Streamable 91 | 92 | 97 | 98 | {% include streamablePlayer.html id=page.streamableId %} 99 | 100 | ## Embed Google Drive 101 | 102 | 107 | 108 | {% include googleDrivePlayer.html id=page.driveId %} 109 | 110 | ## Embed 20Detik 111 | 112 | 117 | 118 | {% include 20detikPlayer.html id=page.detikId %} 119 | 120 | ## Embed Dailymotion 121 | 122 | 127 | 128 | {% include dailymotionPlayer.html id=page.dailymotionId %} 129 | 130 | ## Embed Vidio 131 | 132 | 137 | 138 | {% include vidioPlayer.html id=page.vidioId %} 139 | 140 | ## Embed LINE Today 141 | 142 | 148 | 149 | {% include linetodayPlayer.html id=page.linetodayId country=page.countryId %} 150 | -------------------------------------------------------------------------------- /video-embed.css: -------------------------------------------------------------------------------- 1 | /* Nathan Lam 2 | June 2, 2017 3 | 4 | Add this css for responsive embedded videos in your .css file. */ 5 | 6 | .embed-container { 7 | position: relative; 8 | padding-bottom: 56.25%; 9 | height: 0; 10 | overflow: hidden; 11 | max-width: 100%; 12 | } 13 | 14 | .embed-container iframe, .embed-container object, .embed-container embed { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | height: 100%; 20 | } --------------------------------------------------------------------------------