Animierte GIFs aus Video für Newsletter erstellen

Aus Videos, die Sie über unsere Video Hosting ausliefern, können Sie ganz bequem GIFs erzeugen. Diese eignen sich besonders gut für Mailings / Newsletter und erhöhen die Interaktionsrate deutlich.

Alles, was Sie benötigen, ist die von uns bereitgestellte URL zum Video. Diese sieht so aus:

https://customer-668qiqt2lxitqrjh.cloudflarestream.com/[VIDEO-ID]/iframe

Auf die GIFs können Sie zugreifen, indem Sie aus "iframe" "thumbnails/thumbnail.gif" machen. Das sieht dann so aus:

https://customer-668qiqt2lxitqrjh.cloudflarestream.com/[VIDEO-ID]/thumbnails/thumbnail.gif

Über die URL Parameter steuern Sie anschließend, was das GIF anzeigen soll:

?time=1s&height=200&duration=4s

Die möglichen URL Parameter sind:

• time (default 0s) time from the video e.g. 8m, 5m2s
• height (default 640)
• width (default 640)
• fit (default crop) to clarify what to do when requested height and width doesn't match the original upload, which should be one of:
  • crop cut parts of the video that doesn't fit in the given size
  • clip preserve the entire frame and decrease the size of the image within given size
  • scale distort the image to fit the given size
  • fill preserve the entire frame and fill the rest of the requested size with black background
• duration (default 5s)
• fps (default 8)

Bitte beachten Sie unbedingt, dass "height" den Wert haben muss, wie groß das Bild in Ihrem Mailing sein soll. Ansonsten wirkt das Bild unscharf.

Hier ein Beispiel. Es wird ein GIF von Position "1s" mit "200"px Höhe und "4s" Länge generiert:

Thumbnail URL:
https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.gif?time=1s&height=200&duration=4s

Um Ihren Kunden zu verdeutlichen, dass das Bild klickbar ist und zu einem Video führt, können Sie den folgenden HTML Code verwenden. Tauschen Sie einfach den fett markierten Teil durch Ihre eigene GIF URL aus.
Verlinken Sie anschließend den gesamten Block über Ihr Mailing- / Newsletter-Tool mit dem Ziel Ihrer Wahl. Zum Beispiel die URL zur Seite mit dem Video.

<div style="position: relative; padding-top: 56.25%;">
  <img src="https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.gif?time=1s&height=200&duration=4s" alt="Klicken Sie für Ihren Geburtstagsgruß" style="width: 100%; height: auto;" />
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M8 5v14l11-7L8 5z" fill="currentColor"/>
    </svg>
  </div>
</div>