Shami's Blog

Update: I have since moved to Hugo with Tailwind CSS and not sure if this code is still valid.

So now that I have finally finished fixing my content migration issues I can get back to writing.

While checking my old posts I noticed embedded using the {% youtube %} tag looked like this:

To solve this, I changed /node_modules/hexo/lib/plugins/tag/youtube.js and replaced the return line with

return '<style>.codegena{position:relative;width:100%;height:0;padding-bottom:56.27198%;}.codegena iframe{position:absolute;top:0;left:0;width:100%;height:100%;}</style><div class="codegena"><iframe width="500" height="294" src="https://www.youtube.com/embed/' + id + '?&autohide=2"frameborder="0"></iframe></div>';

Now videos look much better