Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Embed gfycat to site


Question

Site URL: https://gdvfx.net/

Hello, I've found som instructions on embedding gfycat videos or gifs to my site, but haven't been able to get it working.

I am a coding novice, so I'm likely doing something wrong.

The instructions found here: https://github.com/gfycat/gfycat.js state to enter this code right after the opening <body> tag:

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

Then to include an embed tag:

<div class="gfyitem" data-title=true data-autoplay=false data-controls=true data-id="BestYellowishElephantseal"></div>

So what I've tried is selecting the settings gear on the page I'd like to add the embed to, go to advanced and entered the code into the 'Page header code injection'

Then I tried to add both a code block and an embed block with the above example embed tag with no luck.

 

What am I doing wrong?

Any help woudl be greatly appreciated!

 

- Glenn

Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

For future members. Add to Code Block

<img id="block-ShoddyCoarseBluewhale" data-id="ShoddyCoarseBluewhale" class="gfyitem" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
/*var client = {
  client_id: '2_nAwMgY',
  client_secret: 'SECRET_KEY' // GET client_secret here https://developers.gfycat.com/api/
}*/
/*$.ajaxSetup({
    beforeSend: function(xhr) {
         xhr.setRequestHeader('Authorization', 'Bearer ' + client.client_secret);
    }
});*/
$( document ).ready(function() {
var url = 'https://api.gfycat.com/v1/gfycats/'
  $('.gfyitem').each(function(index) {
    var gifID = $(this).data('id')
    var blockID = $(this).attr('id')
    var itemImg = $(this)
    $.get( url+gifID, function( data ) {
      var videoString = '<div id="'+blockID+'"><video  loop="true" autoplay="true" muted><source src="'+data.gfyItem.mp4Url+'" type="video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\""><source src="'+data.gfyItem.webmUrl+'" type="video/webm; codecs=\"vp8, vorbis\""></video></div>'
        itemImg.replaceWith(
          videoString
        )
    });
  })
})
</script>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...