Home » Jquery » jquery – Vimeo Thumbnail Generator works in development, but not production?

jquery – Vimeo Thumbnail Generator works in development, but not production?

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have a site where users post video links (vimeo, youtube, instagram), and the site automatically files them and generates a thumbnail. For youtube and instagram this is very easy as you simply pull the ID from the URL and insert it into the thumbnail path and it works. Vimeo, however, does not share the same ID for the video and its thumbnails. There is a big post from a while back with several different solutions to generate vimeo thumbnails from the ID, multiple of which work while on development on the local server, but neither of which work while online. Any thoughts as to why this might be?

Below are two of the codes I’ve tried, neither of which work unfortunately:

<img id="{{video.id}}thumb" class="img-responsive img-fluid img-thumbnail;" style="position: absolute; top: -9999px; left: -9999px; right: -9999px; bottom: -9999px; margin: auto; width:320px"/>


<script>
                                  $(document).ready(function () {
                                      var vimeoVideoUrl = 'https://player.vimeo.com/video/{{video.vimeo_id}}';
                                      var match = /vimeo.*\/(\d+)/i.exec(vimeoVideoUrl);
                                      if (match) {
                                          var vimeoVideoID = match[1];
                                          $.getJSON('http://www.vimeo.com/api/v2/video/' + {{video.vimeo_id}} + '.json?callback=?', { format: "json" }, function (data) {
                                              featuredImg = data[0].thumbnail_large;
                                              $('#{{video.id}}thumb').attr("src", featuredImg);
                                          });
                                      }
                                  });
</script>

and

<img class="{{video.vimeo_id}} img-responsive img-fluid img-thumbnail;" style="position: absolute; top: -9999px; left: -9999px; right: -9999px; bottom: -9999px; margin: auto; width:320px"/>

<script>
                          var vimeoVideoID = '{{video.vimeo_id}}';

                          $.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {

                              $(".{{video.vimeo_id}}").attr('src', data[0].thumbnail_large);
                          });
</script>

Both work fine on my localhost, but return black boxes when online. Help?

How to&Answer: