Using the gif giphy API to find gifs const gifResponse await fetch https api giphy com v1 gifs trending params api_key KxO58USmyH66fiaLrBNV7ANqJs8Awv5D console log gifResponse console log typeof typeof gifResponse for let v in gifResponse console log v v console log statusText gifResponse json document body style min height 500px let apiKey KxO58USmyH66fiaLrBNV7ANqJs8Awv5D let response await fetch https api giphy com v1 gifs search q cat xmas api_key apiKey limit 8 let json await response json console log JSON stringify json substring 0 200 console log first url json data 0 images original url for let i 0 i json data length i let url json data i images original url let img document createElement img document body appendChild img img src url img width img height 200 img style border 1px solid green console log ready document body style min height 500px let apikey KxO58USmyH66fiaLrBNV7ANqJs8Awv5D let apiurl https api giphy com v1 gifs let offset 0 let rating g pg13 g pg r https developers giphy com docs optional settings rating let response await fetch apiurl search q laughing api_key apikey limit 8 offset offset rating rating let json await response json console log JSON stringify json substring 0 1000 console log first url json data 0 images original url for let i 0 i json data length i let url json data i images original url let img document createElement img document body appendChild img img src url img width img height 200 img style border 1px solid green console log ready document body style min height 300px let apikey KxO58USmyH66fiaLrBNV7ANqJs8Awv5D let apiurl https api giphy com v1 gifs let offset 0 let rating g pg13 g pg r https developers giphy com docs optional settings rating let response await fetch apiurl search q dance tree api_key apikey limit 4 offset offset rating rating bundle downsized_large let json await response json console log JSON stringify json substring 0 1000 console log first url json data 0 images original url for let i 0 i json data length i let url json data i images original url let img document createElement div document body appendChild img img style background image url url img style background size 100 100 img width img height 200 img style width img style height 200px img style border 1px solid green img style display inline block img style position relative function adddesc x tx let span document createElement div span style position absolute span style left x 10 px span style bottom 10px img appendChild span span innerHTML tx span style color white adddesc 0 w json data i images original width adddesc 50 h json data i images original height adddesc 110 f json data i images original frames console log ready document body style min height 300px let apikey KxO58USmyH66fiaLrBNV7ANqJs8Awv5D let apiurl https api giphy com v1 gifs let offset 0 let rating g pg13 g pg r https developers giphy com docs optional settings rating let response await fetch apiurl search q dance tree api_key apikey limit 1 offset offset rating rating bundle downsized_large let json await response json console log JSON stringify json substring 0 1000 console log first url json data 0 images original url function displayImg imgdata let img document createElement div document body appendChild img img style background image url imgdata url img style background size 100 100 img width img height 200 img style width img style height 200px img style border 1px solid green img style display inline block img style position relative function adddesc x tx let span document createElement div span style position absolute span style left x 10 px span style bottom 10px img appendChild span span innerHTML tx span style color white adddesc 0 w imgdata width adddesc 50 h imgdata height adddesc 100 f imgdata frames adddesc 130 gif end displayImg function displayVideo imgdata let img document createElement div img style width img style height 200px img style border 1px solid green img style display inline block img style position relative img style border 2px solid orange document body appendChild img let video document createElement video img appendChild video video style position absolute video style left 0px video style top 0px video style width 200px video style height 200px video width 200 video height 200 video src imgdata mp4 note mp4 instead of url video autoplay true video loop true video style object fit fill force it to fill the size removes aspect ration video setAttribute controls controls if we want controls video type video mp4 function adddesc x tx let span document createElement div span style position absolute span style left x 10 px span style bottom 10px img appendChild span span innerHTML tx span style color white adddesc 0 w imgdata width adddesc 50 h imgdata height adddesc 100 mp4 end displayVideo for let i 0 i json data length i let url json data i images original url displayImg json data i images original available formats sizes console log for let n in json data i images console log n console log displayImg json data i images hd hd images are mp4 hence use vide tag displayVideo json data i images hd console log vid url json data i images hd console log ready
log ready document body style min height 300px let apikey KxO58USmyH66fiaLrBNV7ANqJs8Awv5D let apiurl https api giphy com v1 gifs let offset 0 let rating g pg13 g pg r https developers giphy com docs optional settings rating let response await fetch apiurl search q dance tree api_key apikey limit 1 offset offset rating rating bundle downsized_large let json await response json console log JSON stringify json substring 0 1000 console log first url json data 0 images original url function displayImg imgdata let img document createElement div document body appendChild img img style background image url imgdata url img style background size 100 100 img width img height 200 img style width img style height 200px img style border 1px solid green img style display inline block img style position relative function adddesc x tx let span document createElement div span style position absolute span style left x 10 px span style bottom 10px img appendChild span span innerHTML tx span style color white adddesc 0 w imgdata width adddesc 50 h imgdata height adddesc 100 f imgdata frames adddesc 130 gif end displayImg function displayVideo imgdata let img document createElement div img style width img style height 200px img style border 1px solid green img style display inline block img style position relative img style border 2px solid orange document body appendChild img let video document createElement video img appendChild video video style position absolute video style left 0px video style top 0px video style width 200px video style height 200px video width 200 video height 200 video src imgdata mp4 note mp4 instead of url video autoplay true video loop true video style object fit fill force it to fill the size removes aspect ration video setAttribute controls controls if we want controls video type video mp4 function adddesc x tx let span document createElement div span style position absolute span style left x 10 px span style bottom 10px img appendChild span span innerHTML tx span style color white adddesc 0 w imgdata width adddesc 50 h imgdata height adddesc 100 mp4 end displayVideo for let i 0 i json data length i let url json data i images original url displayImg json data i images original available formats sizes console log for let n in json data i images console log n console log displayImg json data i images hd hd images are mp4 hence use vide tag displayVideo json data i images hd console log vid url json data i images hd console log ready