2016-06-15 5 views
1

gfycat.comは、JS埋め込みオプションを使用して、私のサイトにGIFを埋め込むオプションを提供します。JS私のサイトにgfycatを埋め込む

私はこのようなコードを取得する:私はそれを実行するために必要なJavasciptコードについてのサイト上の任意の情報を見つけることができませんでした

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

問題を。何か案は?

答えて

1

自分のサイトで見つからなかったのですが、サードパーティのサイトに埋め込むためのGitHubレポがあります:https://github.com/gfycat/gfycat.js/tree/master です。

ここ

のreadmeからの重要な部品です:


スクリプト

はJS埋め込みが機能して取得するには、あなただけのオープニングbodyタグの後にこれを追加する必要があります。

<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-iddata-)は:(必要)Gfycat番号
  • data-controlsは:
  • data-title:ホバー上のタイトルを表示(:一時停止/速度/等(falseデフォルト)のためのコントロールを含みますデフォルトfalse
  • data-autoplay:ページの読み込み時に自動的に再生を開始します(デフォルトtrue
  • data-expand非推奨は、data-responsiveを使用してください):false
  • data-responsive:そのコンテナ(デフォルトのスペースを埋めるためにビデオ要素を展開するのスペースを埋めるためにビデオ要素を展開しますそのコンテナ(デフォルトfalse
  • data-max-heightdata-responsive=trueとだけ一緒に動作します):アッパー応答ビデオ
  • 01にバインドされたセットの高さ
  • data-optimize
  • data-gif:負荷:彼らは50%目に見える、と怠惰な負荷GIFを(trueデフォルト)にいるときにビデオを再生。gifファイルの代わりにビデオ(デフォルトfalse
  • data-hd
  • data-playback-speed:設定ビデオ再生速度、間隔の値[0.1258デフォルト:高品質ビデオ(trueデフォルト)を読み込み1

私は、これはおそらくあなたを助けるには遅すぎですが、うまくいけば、これは、この問題に遭遇し、誰に役立ちます知っています。

関連する問題