Embed a Vine in WordPress

The Twitter plugin for WordPress supports embedding a Vine simple embed by pasting Vine URL into the WordPress post editor or by customizing a [vine]WordPress shortcode.

Embed using a Vine URL

Add a Vine embed to a WordPress post by copy-and-pasting a Vine URL on its own line in the post content area.

Check out this cool Vine:

https://vine.co/v/MdKjXez002d

That was a cool Vine.

The Twitter plugin for WordPress extends the oEmbed Vine URL functionality available since WordPress 4.1 with additional plugin-specific functionality. URL-based embeds pass through the plugin’s shortcode handler for site-wide customization of Tweet parameters. JavaScript normally returned in an oEmbed response is enqueued through the WordPress resource manager, improving site performance while centralizing customizations.

Embed using a shortcode

The Twitter plugin for WordPress registers the vine shortcode handler to allow Vine embed customization through a shortcode macro.

Check out this cool Vine:

[vine id="MdKjXez002d" width="400"]

That was a cool Vine.

Site-wide customization using a filter

A website may set site-wide preferences for a Vine embed by acting on the associative array passed to the shortcode_atts_vineWordPress filter.

Example:

/**
 * Always display a Vine simple embed at 400 width
 *
 * @param array $options parsed options with defaults applied
 * @param array $defaults default values of an embedded Tweet
 * @param array $attributes user-defined shortcode attributes
 *
 * @return array options array with our customization applied
 */
function vine_custom_options( $options, $defaults, $attributes )
{
  $options['width'] = 400;
  return $options;
}
add_filter( 'shortcode_atts_vine', 'vine_custom_options', 10, 3 );