I am a Giphy Creator and i want to use the Giphy API in an embed HTML code ..
I was only successful getting a random GIF from Search
here is the code .. if any one could help it would be amazing :)
<!DOCTYPE html>
<html>
<head>
<title>Random GIF Player</title>
<style>
/* Full page background */
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
/* Centered GIF element */
#gif {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<!-- GIF element -->
<img id="gif" src="" />
<!-- JavaScript to load a random GIF from Giphy -->
<script>
// API endpoint for Giphy random GIFs from a specific user
var endpoint =
"https://api.giphy.com/v1/users/mahmood/gifs?api_key=**API KEY HERE**&rating=G";
// Set the GIF source to a random GIF from the specified user on Giphy
function setRandomGif() {
var xhr = new XMLHttpRequest();
xhr.open("GET", endpoint);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText).data;
var randomIndex = Math.floor(Math.random() * data.length);
var gif = document.getElementById("gif");
gif.src = data[randomIndex].images.original.url;
}
};
xhr.send();
}
// Load a random GIF when the page loads
setRandomGif();
// Load a new random GIF when the user clicks on the GIF
var gif = document.getElementById("gif");
gif.addEventListener("click", setRandomGif);
</script>
</body>
</html>
so here the code searches for random image /mahmoud
i wrote it using chat gpt :S
what i want is that it plays a random image from my Giphy account here :
https://api.giphy.com/v1/users/{username}/gifs?api_key={api_key}&rating=G
this didnt work .. i got a black page nothing
https://api.giphy.com/v1/gifs/search?api_key=***************&q=user:mahmood&limit=100&rating=G
this also blank .. nothing happened
