Code Monkey home page Code Monkey logo

antenna's Introduction

Antenna for ExpressionEngine 2, 3, 4, and 5

Antenna is a plugin that will generate the exact, most up-to-date YouTube, Vimeo, Wistia, or Viddler embed code available. With an embed.ly API key, you also have access to hundreds more video providers. In addition to the video's embed code, Antenna also provides you with the video's title, its author, the author's YouTube/Vimeo URL, and a thumbnail. All you have to do is pass it a single URL.

You can also output various pieces of metadata about the video.

Support for ExpressionEngine 1 ended with v1.23. That version can still be downloaded here.

Support for ExpressionEngine 3, 4, and 5 started with version 2.

Installation

  • ExpressionEngine 2:
    • Place the directory /third_party/antenna in /system/expressionengine/third_party/.
  • ExpressionEngine 3, 4, 5:
    • Place the directory /third_party/antenna in /system/user/addons/.
    • Go go the addon manager and click "Install" next to Antenna.

Usage

{exp:antenna url='{the_youtube_or_vimeo_url}' max_width="232" max_height="323"  wmode="transparent|opaque|window"}
    {embed_code}
    {video_title}
    {video_author}
    {video_author_url}
    {video_thumbnail}
    {video_mediumres}
    {video_highres}
    {video_provider}
    {video_ratio}
    {video_width}
    {video_height}
    {video_provider_id}

    {!-- For Vimeo Only --}
    {video_description}

    {if embed_code}
        It worked! {embed_code}
    {if:else}
        No video to display here.
    {/if}
{/exp:antenna}

Set the max_width and/or max_height for whatever size your website requires. The video will be resized to be within those dimensions, and will stay at the correct proportions.

The optional wmode parameter can be used if you're experiencing issues positioning HTML content in front of the embedded media. It accepts values of transparent, opaque and window.

If used as a single tag, it returns the HTML embed/object code for the video. If used as a pair, you get access to the variables above and can use them in conditionals.

There are three image sizes available for videos: {video_thumbnail}, {video_mediumres}, and {video_highres}. They are not consistent across services but they should fall into rough size brackets. {video_thumbnail} is going to be between 100-200px wide; {video_mediumres} will be around 400-500px wide; and {video_highres} will be at least the full size of your uploaded video and could be as wide as 1280px.

Antenna will automatically enforce HTTPS if the provided video URL has a protocol of https:// and is supported by the video service. Alternatively, you can also attempt to force the particular service to return the HTTPS resource by adding the parameter:

force_https='true'

If you're using YouTube, you get access to several more parameters, such as:

  • youtube_rel='0/1' -- Show related videos at end of video. Defaults to 1.
  • youtube_showinfo ='0/1' -- Show the video title and uploader. Defaults to 1.

See this guide from Google for the full list of HTML5 parameters available for YouTube videos. Prefix each parameter with youtube_ when adding these parameters to your Antenna template tag.

If you're using Vimeo, you get access to more parameters and one more variable:

  • vimeo_byline='true/false' -- Shows the byline on the video. Defaults to true.
  • vimeo_title='true/false' -- Shows the title on the video. Defaults to true.
  • vimeo_portrait='true/false' -- Shows the user's avatar on the video. Defaults to true.
  • vimeo_autoplay='true/false' -- Automatically start playback of the video. Defaults to false.
  • vimeo_api='true/false' -- Adds 'api=1' to the vimeo embed url to allow JavaScript API usage. Defaults to false. NOTE: only use this if you're using the legacy Vimeo "Froogaloop" API. Keep it off if you're using the new, Player.js API.
  • vimeo_color='EFEFEF' -- changes the color of the player controls, and the color of the video title (if enabled). The parameter here expects a hex color code.
  • vimeo_loop='true/false' -- loops the Vimeo video automatically
  • {video_description} -- The description of the video, as set in Vimeo

If you're using Viddler, you get access to two more parameters:

  • viddler_type='simple/player' -- Specifies the player type. Defaults to player.
  • viddler_ratio='widescreen/fullscreen' -- Aspect ratio will be automatically determined if not set.

The plugin automatically caches returned data for one week. You can control this setting with the cache_minutes parameter, or set cache_minutes to "0" to disable the cache.

NOTE For this to work with all urls please ensure that in Weblog/Channel -> Preferences, you have 'Automatically turn URLs and email addresses into links?' set to 'No'.

Embed.ly Support

By including an embed.ly API key, you have access to hundreds more video providers. If your URL is not for YouTube, Vimeo, Wistia, or Viddler, Antenna will check embed.ly to pull the correct relevant video embed and information.

Simply include your embed.ly API key as a parameter on your {exp:antenna} tag like:

{exp:antenna url='{example_vine_url}' embedly_key="xxxxxxxxxx" max_width="232" max_height="323"  wmode="transparent|opaque|window"}
	...
{/exp:antenna}

or set your embed.ly API key globally by adding it to ExpressionEngine's config.php file:

$config['antenna_embedly_key'] = 'xxxxxxxxxx';

Compatibility

Antenna is compatible with ExpressionEngine 2-5. The version for ExpressionEngine 2 requires 2.6+. The version for ExpressionEngine 3-5 has been tested on 3.0+.

You must be using PHP 5.2+ and you must have either the cURL library installed or allow_url_fopen enabled.

Note for Wistia users: Wistia doesn't return as much data as the other providers, so not all of the above variables will work. Also, you may need to contact Wistia and ask them to enable "oEmbed support" on your account.

Warranty/License

There's no warranty of any kind. If you find a bug, please tell me and I may try to fix it. It's provided completely as-is; if something breaks, you lose data, or something else bad happens, the author(s) and owner(s) of this plugin are in no way responsible.

This plugin is owned by Matt Weinberg. You can modify it and use it for your own personal or commercial projects, but you can't redistribute it. EE2 and Vimeo functionality added by Adam Wiggall (@turnandface). Wmode compatibility added by Tom Davies (@metadaptive).

antenna's People

Contributors

a-p avatar adamwiggall avatar adrienne avatar alexroper avatar amphibian avatar andrew-kaslick avatar furioursus avatar low avatar lukewilkins avatar mrw avatar pyrobob83 avatar tomdavies avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

antenna's Issues

Vimeo Video Not Displaying

We would like to use Antenna to display private videos from Vimeo. The videos are set to only be visible on one URL. We have used the module successfully many times with private vimeo videos, however they are not showing up on this site using the following code:

{exp:antenna url="{video_url}" max_width="500" max_height="380"} {embed_code} {/exp:antenna}

When I put the URL in the code manually (replacing the {video_url} with a vimeo link) I can see the player.
We are using EE 2.11.7
Please advise.

Thank you.

& entity in iframe url

Hello!

Thank you for this amazing addon!

I have an issue.

Template tag:

{exp:antenna url='{video_url}' max_width="700" max_height="500" vimeo_title='false' vimeo_byline='false' vimeo_portrait='false' vimeo_autoplay='true' cache_minutes='0' youtube_autoplay='1' youtube_rel='0' youtube_showinfo ='0'}
<div class="embed_container">{embed_code}</div>
{/exp:antenna}

HTML output:

<iframe src="https://player.vimeo.com/video/209895447?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;app_id=122963" frameborder="0" allow="autoplay; fullscreen" allowfullscreen title="Shock Therapy"></iframe>

Am i doing something not right? Why i'm getting &amp; instead of & in iframe url?

EE 6.0.0-rc1

YouTube ID Variable

Would it be possible to have a variable for the YouTube Video ID? I was building a site recently that I would have liked to use Antenna on and it was using the YouTube API to generate the iFrames rather then having them all load on page load.

fall back to lower res thumbnail

When I include a thumbnail on a page I would usually want the highest resolution, so I use {video_highres}.

However, I noticed that a lot of videos don't have that resolution and then YouTube served some kind of very very low res default crappy thumbnail.

Even when I use {video_mediumres} YT often serves the crappy default thumbnail.

So now I set every video to use the {video_thumbnail} because there is no way to check when it serves which version.

It would be nice to have this add-on doe that automatically by checking the width/height of the image returned, and if it falls within the threshold of the high/medium/default res thumbnails.

EE5 compatibility?

Is Antenna compatible with EE5? I've got an EE4 site that I'd like to upgrade to EE5, but it uses Antenna quite a bit.

Rel=0 parameter

Would it be possible to include a parameter that excludes related videos for YouTube?

Cheers
Dan

`if no_results`

Hi!

Is it possible to parse {if no_results}{/if} in case of empty responses? Today, nothing is parsed.

Thank you!

{video_highres} is not highres for Vimeo

Hi there! Thanks for this very useful add-on!

Found an issue.

{video_highres} variable for Vimeo returns not highest possible resolution

For example, for this video: https://vimeo.com/523796454 {video_highres} variable returns this image (640 px): https://i.vimeocdn.com/video/1265722798-d291906fd3e6c958815e0e09b15d5cf08811fc74e2f7fed25_640

And for this video: https://vimeo.com/433579869 {video_highres} variable returns this image (295 px): https://i.vimeocdn.com/video/1216245799-32c3a01f036fbc1d04bbaedd63ff65a4dffd647404273dcdd4beabdf0ba739dd-d_295x166

Wistia negative image dimensions on thumbnail generation

Matt,

Thanks for following up! I just ran into a strange issue where Antenna is parsing negative image dimensions on Wistia's thumbnails. If you alter the image dimensions in the output to positive numbers, the thumbnail is generated.

{exp:antenna url="{video_wistia}" cache_minutes="120"}
    <img src="{video_thumbnail}" class="th-full" alt="{title}">
{/exp:antenna}

Output: https://embed-ssl.wistia.com/deliveries/a1a6985a64252fd4895094fe5f2ed57bdffe0c09.jpg?image_crop_resized=-50x-28

Side note, this renders the embed_code properly too:

{exp:antenna url="{video_wistia}" cache_minutes="120" max_width="750"}
    {embed_code}
{/exp:antenna}

EE 2.9.2, Antenna 1.32

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.