Embed URL Attribute

The Embed URL attribute allows you to enter an URL to a resource that they want to embed on their website. 

The system uses the oEmbed protocol to retrieve the embed information for the URL. 

Example Usage

An example usage could be for embedding videos from YouTube or Vimeo. Instead of having to get the embed code and enter that you can simply enter the URL for the video page and the system will retrieve the video information. 

For example, if you enter the following URL: https://www.youtube.com/watch?v=iwGFalTRHDA then the system will output the following information in your template:

Array
(
  [value] => https://www.youtube.com/watch?v=iwGFalTRHDA
  [autoEmbed] => <iframe width="459" height="344" src="https://www.youtube.com/embed/iwGFalTRHDA?feature=oembed" frameborder="0" allowfullscreen></iframe>
  [urlInfo] => Array
  (
    [0] => Array
    (
      [authorName] => KamoKatt
      [authorUrl] => https://www.youtube.com/user/KamoKatt
      [height] => 344
      [html] => <iframe width="459" height="344" src="https://www.youtube.com/embed/iwGFalTRHDA?feature=oembed" frameborder="0" allowfullscreen></iframe>
      [iframeEmbed] => Array (
          [allowfullscreen] => allowfullscreen
          [frameborder] => 0
          [height] => 344 
          [src] => https://www.youtube.com/embed/iwGFalTRHDA?feature=oembed
          [tag] => <iframe allowfullscreen frameborder="0" height="344" src="https://www.youtube.com/embed/iwGFalTRHDA?feature=oembed" width="459"></iframe>
          [width] => 459 
      )
      [providerName] => YouTube
      [providerUrl] => https://www.youtube.com/
      [thumbnail] => Array
      (
          [alt] => Trololo
          [height] => 360
          [src] => https://i.ytimg.com/vi/iwGFalTRHDA/hqdefault.jpg
          [tag] => <img src="https://i.ytimg.com/vi/iwGFalTRHDA/hqdefault.jpg" width="480" height="360" alt="Trololo">
          [width] => 480
      )
      [thumbnailHeight] => 360
      [thumbnailUrl] => https://i.ytimg.com/vi/iwGFalTRHDA/hqdefault.jpg
      [thumbnailWidth] => 480
      [title] => Trololo
      [type] => video
      [url] => https://www.youtube.com/watch?v=iwGFalTRHDA
      [width] => 459
    )
  )
  [hasErrors] =>
  [errors] => array()
)

The above is the format for videos.

The information that is retrieved is dependent upon the type of media (video, audio, etc) and the vendor providing the information. 

The following values will always be available:

  • type The type of media (video, photo, rich, audio or link). The most common types are video, photo and rich.
  • value (the original value entered)
  • autoEmbed (the embed code returned by the vendor)
  • urlInfo (information about the resource URL)
    • type
  • hasErrors (whether or not there were any errors retrieving the embed information)
  • errors (the errors if there were any)

See the oEmbed specification for exact information that could be returned for each resource type. 

Videos

Below is a sample the data returned if the type is "video".

Array
(
  [value] => https://www.youtube.com/watch?v=iwGFalTRHDA
  [autoEmbed] => <iframe width="459" height="344" src="https://www.youtube.com/embed/iwGFalTRHDA?feature=oembed" frameborder="0" allowfullscreen></iframe>
  [urlInfo] => Array
  (
    [0] => Array
    (
      [authorName] => KamoKatt
      [authorUrl] => https://www.youtube.com/user/KamoKatt
      [height] => 344
      [html] => <iframe width="459" height="344" src="https://www.youtube.com/embed/iwGFalTRHDA?feature=oembed" frameborder="0" allowfullscreen></iframe>
      [iframeEmbed] => Array (
          [allowfullscreen] => allowfullscreen
          [frameborder] => 0
          [height] => 344 
          [src] => https://www.youtube.com/embed/iwGFalTRHDA?feature=oembed
          [tag] => <iframe allowfullscreen frameborder="0" height="344" src="https://www.youtube.com/embed/iwGFalTRHDA?feature=oembed" width="459"></iframe>
          [width] => 459 
      )
      [providerName] => YouTube
      [providerUrl] => https://www.youtube.com/
      [thumbnail] => Array
      (
          [alt] => Trololo
          [height] => 360
          [src] => https://i.ytimg.com/vi/iwGFalTRHDA/hqdefault.jpg
          [tag] => <img src="https://i.ytimg.com/vi/iwGFalTRHDA/hqdefault.jpg" width="480" height="360" alt="Trololo">
          [width] => 480
      )
      [thumbnailHeight] => 360
      [thumbnailUrl] => https://i.ytimg.com/vi/iwGFalTRHDA/hqdefault.jpg
      [thumbnailWidth] => 480
      [title] => Trololo
      [type] => video
      [url] => https://www.youtube.com/watch?v=iwGFalTRHDA
      [width] => 459
    )
  )
  [hasErrors] =>
  [errors] => array()
)

 Photos

Below is a sample of the data that is returned if the type is "photo".

Array
(
    [value] => http://www.flickr.com/photos/bees/2341623661/
    [autoEmbed] => <a data-flickr-embed="true" href="https://www.flickr.com/photos/bees/2341623661/" title="ZB8T0193 by ‮‭‬bees‬, on Flickr"><img     src="https://farm4.staticflickr.com/3123/2341623661_7c99f48bbf_b.jpg" width="1024" height="683" alt="ZB8T0193"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
    [urlInfo] => Array
    (
        [0] => Array
        (
            [authorName] => ‮‭‬bees‬
            [authorUrl] => https://www.flickr.com/photos/bees/
            [cacheAge] => 3600
            [flickrType] => photo
            [height] => 683
            [html] => <a data-flickr-embed="true" href="https://www.flickr.com/photos/bees/2341623661/" title="ZB8T0193 by ‮‭‬bees‬, on Flickr"><img src="https://farm4.staticflickr.com/3123/2341623661_7c99f48bbf_b.jpg" width="1024" height="683" alt="ZB8T0193"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
            [image] => Array
            (
                [alt] => ZB8T0193
                [height] => 683
                [src] => https://farm4.staticflickr.com/3123/2341623661_7c99f48bbf_b.jpg
                [tag] => <img src="https://farm4.staticflickr.com/3123/2341623661_7c99f48bbf_b.jpg" width="1024" height="683" alt="ZB8T0193">
                [width] => 1024
            )
            [license] => All Rights Reserved
            [licenseId] => 0
            [providerName] => Flickr
            [providerUrl] => https://www.flickr.com/
            [thumbnail] => Array
            (
                [alt] => ZB8T0193
                [height] => 150
                [src] => https://farm4.staticflickr.com/3123/2341623661_7c99f48bbf_q.jpg
                [tag] => <img src="https://farm4.staticflickr.com/3123/2341623661_7c99f48bbf_q.jpg" width="150" height="150" alt="ZB8T0193">
                [width] => 150
            )
            [thumbnailHeight] => 150
            [thumbnailUrl] => https://farm4.staticflickr.com/3123/2341623661_7c99f48bbf_q.jpg
            [thumbnailWidth] => 150
            [title] => ZB8T0193
            [type] => photo
            [url] => https://farm4.staticflickr.com/3123/2341623661_7c99f48bbf_b.jpg
            [webPage] => https://www.flickr.com/photos/bees/2341623661/
            [webPageShortUrl] => https://flic.kr/p/4yVr8K
            [width] => 1024
        )
    )
    [hasErrors] =>
    [errors] => Array ()
)

Rich

Below is a sample of the data that is returned if the type is "rich".

Array
(
    [value] => https://www.mixcloud.com/spartacus/party-time/
    [autoEmbed] => <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2Fspartacus%2Fparty-time%2F&amp;hide_cover=1" frameborder="0"></iframe>
    [urlInfo] => Array
    (
        [0] => Array
        (
            [authorName] => Spartacus
            [authorUrl] => https://www.mixcloud.com/spartacus/
            [cacheAge] => 86400
            [embed] => <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2Fspartacus%2Fparty-time%2F&amp;hide_cover=1" frameborder="0"></iframe>
            [height] => 120
            [html] => <iframe width="100%" height="120" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2Fspartacus%2Fparty-time%2F&amp;hide_cover=1" frameborder="0"></iframe>
            [iframeEmbed] => Array
            (
                [frameborder] => 0
                [height] => 120
                [src] => https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2Fspartacus%2Fparty-time%2F&hide_cover=1
                [tag] => <iframe frameborder="0" height="120" src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2Fspartacus%2Fparty-time%2F&hide_cover=1" width="100%"></iframe>
                [width] => 100%
            )
            [image] => Array
            (
                [alt] => Party Time
                [src] => https://thumbnailer.mixcloud.com/unsafe/600x600/extaudio/6/1/a/1/279f-e3c0-4871-aa8e-c4cf5466edb8.png
                [tag] => <img src="https://thumbnailer.mixcloud.com/unsafe/600x600/extaudio/6/1/a/1/279f-e3c0-4871-aa8e-c4cf5466edb8.png" alt="Party Time">
            )
            [providerName] => Mixcloud
            [providerUrl] => https://www.mixcloud.com
            [title] => Party Time
            [type] => rich
            [url] => https://www.mixcloud.com/spartacus/party-time/
            [width] => 100%
        )
    )
    [hasErrors] =>
    [errors] => Array ()
)

HTML Objects

The iframeEmbed, image and thumbnail data in the above examples are actually HTML Objects. You can use that object to add HTML attributes such as a class.

For example, you could loop through the URLs and output the thumbnail images with a CSS class. In this example the attribute is saved to a variable called "embed".

{% for url in embed.urlInfo %}
    {% set url.thumbnail.class = 'myClass' %}
    <a href="{{ url.url }}">{{ url.thumbnail.tag }}</a>
{% endif %}

Supported Providers

The following providers are supported by this attribute. URLs from other websites will be ignored.

Animoto
Example: https://animoto.com/play/JzwsBn5FRVxS0qoqcBP5zA

DailyMotion
Example: http://www.dailymotion.com/video/x4qvl4x_kayakers-get-a-whale-of-a-surprise_fun

Flickr
Example: https://www.flickr.com/photos/alex-stoddard/6961478156/in/gallery-flickr-72157665643443294/

FunnyOrDie
Example: http://www.funnyordie.com/videos/95c5684807/yummy-anchovy-pizza

Hulu
Example: http://www.hulu.com/watch/921580

Instagram
Example: http://instagr.am/p/fA9uwTtkSN/

Issuu
Example: http://issuu.com/iscience/docs/issue23

Kickstarter
Example: http://www.kickstarter.com/projects/crypteks/crypteks-usbtm-encrypted-and-lockable-usb-solution

Meetup
Example: http://www.meetup.com/ny-tech

MixCloud
Example: https://www.mixcloud.com/spartacus/party-time/

PollDaddy
Example: https://polldaddy.com/poll/7012505/

Reverbnation
Example: https://www.reverbnation.com/scottyandthereverbs

Scribd
Example: http://www.scribd.com/doc/115726071/10-Practical-Tools-for-a-Resilient-Local-Economy

SlideShare
Example: http://www.slideshare.net/shvmdhwn/personal-branding-do-it-yourself

SoundCloud
Example: https://soundcloud.com/nour-moukhtar/ludwig-van-beethoven-fur-elise

Speakerdeck
Example: https://speakerdeck.com/deanohume/faster-mobile-websites

Spotify
Example: https://play.spotify.com/user/spotify/playlist/4gWfh2NYhzzJ9NGP9D9fHE

Ted
Example: http://www.ted.com/talks/david_gallo_shows_underwater_astonishments.html

Twitter
Example: https://twitter.com/aptuitiv/status/365832426167091200

Vimeo
Example: https://vimeo.com/180528272

Vine
Example: https://vine.co/v/OZQ61X9KWwB

WordpressTV
Example: http://wordpress.tv/2013/04/12/jayvie-canono-designing-for-development

Youtube
Example: https://www.youtube.com/watch?v=iwGFalTRHDA