Welcome! To use this support forum, please Login or Join Today!

   

Responsive Video for Vimeo Video

{name}
RankRank

Total Posts: 47

Joined 2012-08-10

PM

 

Hi,

I’m starting to put up a bunch of videos on my site and I use Synapse.  I see that it supports YouTube but does is support Vimeo?  If not, what should I do?

Thanks!
J

{name}
RankRank

Total Posts: 47

Joined 2012-08-10

PM

 

Anyone home?  =P

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

The youtube shortcode is primarily for customizing the video player skin/branding. For Vimeo (and YouTube for that matter), you just enter the video URL into the editor:

https://cl.ly/0W44453p080n

The output can be made responsive by adding to your child functions.php:

/**
 * Responsify Iframes/Embeds
 */

add_filter( 'embed_oembed_html', 'smpl_oembed_filter', 10, 4 ) ;

function smpl_oembed_filter($html, $url, $attr, $post_ID) {
    $return = '
'.$html.'
'; return $return; }

And then to your stylesheet:

/**
 * Responsive oEmbed
 */

.wp-video {
  margin: 1.25em auto;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  margin: 1.25em auto;
  }

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
{name}
RankRank

Total Posts: 47

Joined 2012-08-10

PM

 

Great, thank you! =)