GlennimusPrime Posted May 14, 2020 Share Posted May 14, 2020 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
tuanphan Posted May 20, 2020 Share Posted May 20, 2020 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.