JS在我的網站上嵌入gfycat

Question

gfycat.com提供了在我的網站上使用JS Embed選項嵌入GIF的選項。

我得到了這樣的代碼：

<img class='gfyitem' data-id='HighMelodicDairycow' /> 

，我無法找到運行它所需要的JavaScipt程式碼網站上的任何信息的問題。有任何想法嗎？

Answer 1

我無法在他們的網站上找到它，但這裏是他們的GitHub回購嵌入第三方網站：https://github.com/gfycat/gfycat.js/tree/master 。

下面是自述文件中的重要組成部分：

---

腳本

爲了讓JS嵌入工作，你只需要打開身體標記後補充一點：

<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 = "https://assets.gfycat.com/gfycat.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'gfycat-js')); 
</script> 

當此腳本運行時，任何具有類gfyitem的元素都將轉換爲Gfycat嵌入。

---

可選項

如果你想改變嵌入的行爲，你可以將這些添加的元素作爲數據屬性。 （data-）

• data-id：（必需）的Gfycat ID
• data-controls：包括用於暫停/速度/等（默認：false）對照
• data-title：顯示在懸停標題（ 默認：false）
• data-autoplay：在頁面加載時自動啓動播放（默認：true）
• data-expand（棄用，請使用data-responsive）：擴展視頻元素，以填補其容器（默認的空間：false）
• data-responsive：擴大視頻元素來填充的空間其容器（默認：false）
• data-max-height（與data-responsive=true只能一起）：設置高度上限爲響應視頻
• data-optimize：玩時，他們50％的可見光視頻和延遲加載的GIF（默認：true）
• data-gif：負載。gif文件，而不是視頻（默認：false）
• data-hd：加載高質量視頻（默認：true）
• data-playback-speed：設定視頻播放速度，從區間值[0.125，8]（默認：1）

我知道你這是可能爲時已晚，以幫助你，但希望這可以幫助其他人，運行到這個問題。