Question

我为社交媒体制作看起来像这样的电影图：https://www.instagram.com/p/BLi7CKKj2fW/

我们的想法是我们一直将这些发布到我的公司社交帐户（即Facebook和Instagram），但现在我们也希望将它们包含在我们的博客中。

主要问题是我们的博客是由simpleview托管的，它不允许我们自己托管文件（否则这将是一个简单的修复）。它只允许我们托管图像。我们尝试使用.gifs，但.gifs非常有限（只有256种颜色），它们的质量不够高，无法正确展示电影图。

我尝试使用以下方法嵌入Instagram：

<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>

这就像我希望除之外它不会自动播放一样。

我试过像这样嵌入Facebook：

<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>

将使用data-autoplay =“true”参数自动播放。但是我似乎无法让它循环。

最后我尝试了像你这样的人：

<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>

自动播放和循环（几乎完美），但当它循环时，它必须重新加载视频 - 这破坏了电影图的再现。

我想要的只是我博客上的cinemagraph，它包含循环，自动播放，并尽可能减少控件/品牌。

任何人都有帮助/建议吗？

如果上面的代码与以下评论中的w3schools无法链接

正在寻找一种方法在我的博客上嵌入Cinemagraph循环和自动播放

0 个答案: