Looking for a way to embed a Cinemagraph on my blog that loops and autoplays

Question

I create cinemagraphs for social media that look like this: https://www.instagram.com/p/BLi7CKKj2fW/

The idea is we post these to my companies social accounts (namely facebook and instagram) all the time, but now we want to include them in our blog as well.

The main issue is that our blog is hosted by simpleview, which doesn't allow us to host the file ourselves (otherwise this would be a simple fix). It only allows us to host images. We tried using .gifs but .gifs are very limited (only 256 colors) and they are not high quality enough to properly show off the cinemagraphs.

I've tried embedding an instagram using this:

<blockquote class="instagram-media" data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:28.125% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/BLi7CKKj2fW/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by Justus Wise (@justusjohnwise)</a> on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-10-14T13:51:36+00:00">Oct 14, 2016 at 6:51am PDT</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

This works just as I want it to except that it doesn't autoplay.

I've tried embedding Facebook like this:

<div id="fb-root"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>



<div class="fb-video" data-autoplay="true" data-href="https://www.facebook.com/justusj.wise/videos/106163723455703/" data-width="1920" data-show-text="false">
  <blockquote cite="https://www.facebook.com/justusj.wise/videos/106163723455703/" class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/justusj.wise/videos/106163723455703/"></a>
    <p></p>Posted by <a href="https://www.facebook.com/justusj.wise">Justusj Wise</a> on Thursday, August 31, 2017</blockquote>
</div>

which will autoplay using the data-autoplay="true" parameter. However I can't seem to get it to loop.

Finally I tried youtube like this:

<p><iframe frameborder="0" height="720px" src="https://www.youtube.com/embed/4VsRjbQi4aw?
autoplay=1&amp;controls=0&amp;showinfo=0&amp;autohide=1&amp;loop=1&amp;playlist=4VsRjbQi4aw" width="1080px"></iframe></p>

which autoplays and loops (almost perfect) but when it loops it has to load the video all over again -- which ruins the emersion of the cinemagraph.

All I want is a cinemagraph on my blog that loops, autoplays, and has minimal controls/branding as possible.

Anyone have help/advice?

if the code above isn't working links to w3schools in comment below