Skip to content

Instantly share code, notes, and snippets.

@samueleastdev
Created September 2, 2022 18:58
Show Gist options
  • Save samueleastdev/f13f17832cee7b680f3cd7b87e8e6f69 to your computer and use it in GitHub Desktop.
Save samueleastdev/f13f17832cee7b680f3cd7b87e8e6f69 to your computer and use it in GitHub Desktop.
Showdown JS Video Link Finder - Extension
// Finds youtube and vimeo links in code and converts to iframes css below for 16/9
/*
.iframe-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
margin: 20px 0;
}
.iframe-wrapper iframe {
display: block;
border: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
*/
showdown.setFlavor('github');
showdown.extension('video-finder', function() {
return [{
type: 'lang',
filter: function(text: any, converter: any, options: any) {
var mainRegex = new RegExp(
/(?:(?:https?:)?(?:\/\/)?)(?:(?:www)?\.)?youtube\.(?:.+?)\/(?:(?:watch\?v=)|(?:embed\/))([a-zA-Z0-9_-]{11})/i,
'gm'
);
text = text.replace(mainRegex, function(match: any, content: any) {
return `\n<div class="iframe-wrapper"><iframe src="https://www.youtube.com/embed/${content}?rel=0" frameborder="0" allowfullscreen=""></iframe></div>\n`;
});
return text;
},
},
{
type: 'lang',
filter: function(text: any, converter: any, options: any) {
var mainRegex = new RegExp(/(?:(?:https?:)?(?:\/\/)?)?youtu\.be\/([a-zA-Z0-9_-]{11})/i, 'gm');
text = text.replace(mainRegex, function(match: any, content: any) {
return `\n<div class="iframe-wrapper"><iframe src="https://www.youtube.com/embed/${content}?rel=0" frameborder="0" allowfullscreen=""></iframe></div>\n`;
});
return text;
},
},
{
type: 'lang',
filter: function(text: any, converter: any, options: any) {
var mainRegex = new RegExp(/(?:(?:https?:)?(?:\/\/)?)(?:(?:www)?\.)?vimeo.com\/(\d+)/i, 'gm');
text = text.replace(mainRegex, function(match: any, content: any) {
return `\n<div class="iframe-wrapper"><iframe src="https://player.vimeo.com/video/${content}?rel=0" frameborder="0" allowfullscreen=""></iframe></div>\n`;
});
return text;
},
},
];
});
const converter = new showdown.Converter({
extensions: ['video-finder']
});
converter.setOption('simplifiedAutoLink', true);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment