Shami's Blog

Sysadmin, Because Even Developers Need Heroes

Responsive Youtube Videos With Hexo

2016-09-27

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

About Me

Dev gone Ops gone DevOps. Any views expressed on this blog are mine alone and do not necessarily reflect the views of my employer.

twitter linkedin