Jump to content

Embed gfycat to site

Recommended Posts

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 comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.