oui_embed

Embed everything…

Get information from any web page (using oembed, opengraph, twitter-cards, scrapping the html, etc). It’s compatible with any web service (youtube, vimeo, flickr, instagram, etc) and has adapters to some sites like (archive.org, github, facebook, etc).

Download | Donate

Table of contents

• Plugin requirements
• Installation
• Preferences
• Tags
  • oui_embed
  • oui_embed_info
• Examples
  • Single tag use
  • Conatiner tag use
• Styling
• Author
• Licence

Plugin requirements

oui_embed’s minimum requirements:

• Textpattern 4.5+
• Embed

Installation

1. Download Embed by Oscar Otero, rename the src folder to embed and paste it in your textpattern/vendors folder;
2. paste the content of the plugin file under the Admin > Plugins, upload it and install.

Preferences

Visit the plugin prefs to add additional parameters or key needed for some providers.

Tags

oui_embed

Single or container tag use to embed your stuff.

<txp:oui_embed url="…" />

Attributes

Required

• url="…" – Default: unset – The url from which you want to get any information.

Recommended

• cache_time="…" — Default: 0 – Duration of the cache in seconds; during this time the result of the tags request will be stored in the Txp cache folder and read from there, avoiding too many external requests.

Optional

Single tag use

• class="…" – Default: unset – The css class to apply to the HTML tag assigned to wraptag.
• type="…" – Default: code – The information to retrieve from the url feed. Valid values are title, description, url, type, tags, images, image, imageWidth, imageHeight, code, width, height, aspectRatio, authorName, authorUrl, providerName, providerUrl, providerIcons, providerIcon, publishedDate (More informations).
• label="…" – Default: unset – The label used to entitled the generated content.
• labeltag="…" – Default: unset – The HTML tag used around the value assigned to label.
• responsive="…" – Default: unset – Uses a div as wrapper if the info attribute value is code and adds a padding-top to it according to content ratio. You still need to set the rest of the css rules. Useful for video embed.
• wraptag="…" – Default: ul – The HTML tag to use around the generated content.

Container tag use

• class="…" – Default: unset – The css class to apply to the HTML tag assigned to wraptag.
• label="…" – Default: unset – The label used to entitled the generated content.
• labeltag="…" – Default: unset – The HTML tag used around the value assigned to label.
• wraptag="…" – Default: ul – The HTML tag to use around the generated content.

Special

• hash_key="…" – Default: 194820 – A number used to hash the 32-character reference assigned to your query and to generate a key for your cache file (you shouldn’t need to change that).

oui_embed_info

Single tag to use in a oui_embed container tag.

<txp:oui_embed url="…">
    <txp:oui_embed_info info="…" />
</txp:oui_embed>

Attributes

See oui_embed optional attributes for single tag use.

Example

Single tag use

<txp:oui_embed url="https://youtu.be/aVARdqevPfI" />

returns:

<iframe width="480" height="270" src="https://www.youtube.com/embed/aVARdqevPfI?feature=oembed" frameborder="0" allowfullscreen></iframe>

Container tag use

<txp:oui_embed url="https://vimeo.com/157562955" label="Embed" labeltag="h1">
    <txp:oui_embed_info type="code" responsive="1" label="Video" labeltag="h2"   />
    <txp:oui_embed_info type="title" label="Title" labeltag="h2" wraptag="p" />
</txp:oui_embed>

returns:

<h1>Embed</h1>

<h2>Video</h2>
<div class="oui_embed " style="padding-top:56.25%">
    <iframe src="https://player.vimeo.com/video/157562955" width="1920" height="1080" frameborder="0" title="The Uses of Envy" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<h2>Title</h2>
<p>The Uses of Envy</p>

Styling

Responsive use

To make your embed content fit the width of its container and keep its ratio, use the responsive attribute…

<txp:oui_embed url="…" responsive="1" />

…and add the following css rules to your stylesheet.

.oui_embed // or your wrap class // {
    position: relative;
    width: 100%;

    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Author

Nicolas Morand

Licence

This plugin is distributed under MIT license.