Skip to content

Instantly share code, notes, and snippets.

@tlhunter
Last active November 3, 2018 05:56
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tlhunter/d42bcf6cea2654abc08248031830f917 to your computer and use it in GitHub Desktop.
Replace GitHub Gist's, YouTube, Vimeo URLs with their embed equivalent
/**
* This function accepts text which is to be transformed into HTML. When
* it encounteres a line which simply contains a single URL it will replace
* that URL with an HTML tag to embed the corresponding resource.
*
* Supported services:
* - GitHub Gists
* - YouTube Videos
* - Vimeo Videos
*/
const GIST = /^(https:\/\/gist\.github\.com\/[a-zA-Z0-9_-]+\/[a-z0-9]+)$/gm;
const VIMEO = /^https:\/\/vimeo\.com\/([0-9]+)$/gm;
const YOUTUBE = /^https:\/\/www\.youtube\.com\/watch\?v=([0-9A-Za-z-_]+)$/gm;
const WIDTH = 640;
const HEIGHT = 480;
function gist(input, width, height) {
return input.replace(
GIST,
'<script src="$1.js"></script>'
);
}
function vimeo(input, width, height) {
return input.replace(
VIMEO,
`<iframe class="video-embed" width=\"${width}\" height=\"${height}\" src=\"https://player.vimeo.com/video/$1?app_id=122963\" frameborder=\"0\" allow=\"fullscreen\" allowfullscreen></iframe>`
);
}
function youtube(input, width, height) {
return input.replace(
YOUTUBE,
`<iframe class="video-embed" width=\"${width}\" height=\"${height}\" src=\"https://www.youtube.com/embed/$1?feature=oembed\" frameborder=\"0\" allow=\"fullscreen\" allowfullscreen></iframe>`
);
}
const TASKS = [ gist, vimeo, youtube ];
module.exports = function (html, width, height) {
for (let task of TASKS) {
html = task(html, width || WIDTH, height || HEIGHT);
}
return html;
};
@tlhunter
Copy link
Author

tlhunter commented Nov 3, 2018

Example Usage:

const embed = require('./embed.js');
const HTML = `
https://www.youtube.com/watch?v=Y3uyfm9P1jQ
https://www.youtube.com/watch?v=nbY2ukvFFNc
https://www.youtube.com/watch?v=eejnHjgiy3I

https://vimeo.com/190942156
https://vimeo.com/148970924

no touch https://vimeo.com/148970924
https://vimeo.com/148970924 no touch

https://gist.github.com/tlhunter/d554a6b90ac53f61c16285a89a9b8f2e
https://gist.github.com/kesor/2622346
`;
const result = embed(HTML, 1280, 960);

console.log(result);

Example Output:

<iframe class="video-embed" width="1280" height="960" src="https://www.youtube.com/embed/Y3uyfm9P1jQ?feature=oembed" frameborder="0" allow="fullscreen" allowfullscreen></iframe>
<iframe class="video-embed" width="1280" height="960" src="https://www.youtube.com/embed/nbY2ukvFFNc?feature=oembed" frameborder="0" allow="fullscreen" allowfullscreen></iframe>
<iframe class="video-embed" width="1280" height="960" src="https://www.youtube.com/embed/eejnHjgiy3I?feature=oembed" frameborder="0" allow="fullscreen" allowfullscreen></iframe>

<iframe class="video-embed" width="1280" height="960" src="https://player.vimeo.com/video/190942156?app_id=122963" frameborder="0" allow="fullscreen" allowfullscreen></iframe>
<iframe class="video-embed" width="1280" height="960" src="https://player.vimeo.com/video/148970924?app_id=122963" frameborder="0" allow="fullscreen" allowfullscreen></iframe>

no touch https://vimeo.com/148970924
https://vimeo.com/148970924 no touch

<script src="https://gist.github.com/tlhunter/d554a6b90ac53f61c16285a89a9b8f2e.js"></script>
<script src="https://gist.github.com/kesor/2622346.js"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment