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".

Photos

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

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&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&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&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 %}