Why doesn't this webm play?

I have confusion because a webm isn't showing up properly. But when I change the code to the bare minimum like <video controls><source src="http://i.imgur.com/91S22q6.webm" type="video/webm" codecs="vp8, vorbis" style="width: 100%; height: auto;></video> then it works... so what is going on with my full code that the webm doesn't work?

https://jsfiddle.net/2buqa04d/

HTML

<div class = "entry-body">
  <div class = "entry-title">
    <a href="http://i.imgur.com/91S22q6.webm">Title</a>
  </div>
  <div class= "entry-byline">
    by John Smith
  </div>
</div>

JS

$('.entry-body').each(function() {

var hplink = ($(this).find('.entry-title').find("a").prop('href'));

                        if (hplink.toLowerCase().match(/\.(webm)/g)) { 
                            
              
                            
            $(this).find('.entry-byline').after('<div class="beforeembed"></div><div class="hpembed hpembedMW"><video controls><source src="'+hplink+'" type="video/webm" codecs="vp8, vorbis" style="width: 100%; height: auto;></video></div>');

                        }
            
alert(hplink);

});