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.