Embedding a YouTube or Vimeo video in your slider


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Updated August 2015: Added an option to automatically loop youtube videos (default true) and code updated to work with Customizr-Pro 1.2+ and Customizr 3.4+

Updated April 2015: Added an option to prevent the related videos showing (youtube).

Updated March 2015: Added unmute on hover. This snippet works also with Customizr-Pro

Hi,

This quite advanced code snippet allows you to replace a slide of any Customizr slider by an embedded YouTube or Vimeo video, just like in the example above.

In addition, and with a few lines of javascript and CSS, it’s been made responsive and always vertically and horizontally centered (try to resize your screen to see this in action).

Under the hood, it uses a filter from the Customizr hooks API named : tc_slide_background, and it overrides the ‘oembed_fetch_url’ (from wp-includes\class-oembed.php) to optionally add the autoplay and loop parameters to your video, which unfortunately are not built-in WordPress options.

 

You can set 9 parameters in the code :

  1. the name of the slider (tne one choosen when creating your slider)
  2. the slide position in the slider. Set 1 for the first slide, 2 for the second and so on.
  3. the url of the video (not the embedding code, just the url which looks like : ‘http://player.vimeo.com/video/39312923’)
  4. autoplay : true = will be played on load
  5. mute volume : true = volume set to 0
  6. unmute on hover: true = the video will unmute on mouse hover
  7. pause on slide : true = the video will paused when not visible
  8. related videos : false = will not show related videos on playing end (youtube ONLY)
  9. yt_video : true = will loop youtube video

As for all code snippet, you need to paste it in your functions.php file.

 

Bonus : if you uncomment the $_video array, you’ll have a beautiful random from a selection of Vimeo + YouTube videos, like in the slider above this snippet.

Code and resources used for this snippet :

 

I hope you’ll enjoy this one and I look forward to seeing your beautiful examples!

 


Related Snippets you may also like


43 thoughts on “Embedding a YouTube or Vimeo video in your slider

  • Jaume Albaigès

    Hello Nicolas,

    I’ve been trying this snippet, and I have a couple of questions for you:

    1) In the _re_center() function, I feel there’s bug in the formula used to calculate new_height:

    In your code:

    I think it should be:

    And maybe better (because slider may not be full window width):

    2) It seems that Youtube filters are not applied, because the video does not autoplay, does not mute and does not have an id. I am using last version of the theme (3.2.15). I have tried to call the filters outside the “if” statements with no results.

  • Aaron DeVandry

    Hi Nicolas. How do you make the audio so that it’s muted unless the visitor mouses over the video, as in the example at the top of this page?

    • Nicolas Post author

      Hi Aaron,
      to unmute on mouse hover, I have just added the following code which is fired onPlayerReady :

      I hope this will help !

      • Aaron DeVandry

        Does this code still apply?

  • John

    Hi,

    Video does not auto-repeat and therefore shows related videos at the end.

    Also need to display an image only on mobile.

    Also video does not mute on Chrome and does on IE.

    Any way to host video on hosting instead of YouTube/Vimeo?

    Any way to stop users from being able to pause?

    Would love to see all these features.

    Thanks for this theme.

    P.S. oh there is the biggest issue I forgot lol, sometimes (and I see other have this problem above) the video says “&caching=xxxxxxxx” instead of displaying the video. It does not have to do with coding error because some videos work and some don’t.

    Thanks again 🙂

    • Nicolas Post author

      Thanks John for this feedback and features request.
      There’s many ! 🙂

      It is hard to answer at this point but I have just included all your suggestion in my to improve list.
      I appreciate your contribution,
      Nicolas.

  • Cedric

    Thank you Nicolas,

    I do not quite mastered programming in PHP to launch into this adventure.

    I thought maybe someone will he bring me this help?

    Cheers

  • Cedric

    Hi,

    Is it possible to have in the slider one only persistent video through all the slides. for example I have 4 slides in my slider with associated text for each slide. I would remplace the 4 images but of course keep the 4 texts, within the video along the show. The effect is to show the complete video in background and the text of my 4 slides in the front side.

    Thanks

    • Nicolas Post author

      Hi Cedric,
      Text slide only with fixed video in the background : this snippet does not cover this particular case but the current code could be a good starting point.
      I would be interested by sharing the result if you manage to do it!
      Cheers

  • John

    Hi Nick,

    Currently, everything is great except the video will not mute. Here are the current parameter settings:

    $_autoplay = true;//<= true = autoplay
    $_mute_volume = true;// true = volume set to 0
    $_pause_on_slide = true;//true = the video is paused on slide change

    Hopefully you can help fix this.

    Thanks,
    John

    P.S. it is a YouTube video.

  • Moh

    The following parameters not working:

    // Add video to slider
    add_filter(‘tc_slide_background’ , ‘set_video_slider’, 10, 4);
    function set_video_slider($_original_bg , $link, $id, $s_name ) {
    //////////////// Parameters : ////////////////
    $my_slider_name = ‘homepage-slider’;//set the name you have choosen when creating your slider
    $slide_position = 1; //<= this will replace the first slide
    $_video = 'https://www.youtube.com/watch?v=oUlLeDKPCYA&#039;;//<=the url of your vimeo or youtube video
    $_autoplay = true;//<= true = autoplay
    $_mute_volume = true;// true = volume set to 0
    $_pause_on_slide = true;//true = the video is paused on slide change
    //////////////////////////////////////////////
    //uncomment this video array to run the random video
    //$_video = array( 'https://www.youtube.com/watch?v=oUlLeDKPCYA&#039; , 'http://vimeo.com/108792063&#039;, 'http://vimeo.com/73373514&#039;, 'http://vimeo.com/39312923&#039;, 'http://vimeo.com/108104171&#039;, 'http://vimeo.com/106535324&#039; , 'http://vimeo.com/108138933&#039;, 'http://vimeo.com/107789364&#039;, 'http://vimeo.com/107580451&#039; );

    *******************************************

    In our functions.php we have "htmlified" our slider, and in CSS we have increased slider height to 600px.

    Could these be the reason why the video is not working?

    Neither "homepage-slider" nor "homepage slider" work and that is the name of our slider.

    Thanks,
    Moh

    • Moh

      Scratch that, video is working but volume mute paramater still not working and most importantly, would be great to have the regular slider image replace the video automatically on mobile as it currently does not autoplay on mobile plus opens in new screen = no good.

      If you know how to replace video with regular slider image on mobile do let me know (surely this will help others as well).

      Thank you

  • Jessica Osbourne

    Hi Nick, I have tried to use your code here, I copied and pasted it into my functions.php on the wordpress editor, entered the urls for the videos and slider number of what I’d like to show and I get NO videos showing, I’m only getting the images in the slider, no videos… HELP?

    What am i doing wrong?

    • Nicolas Post author

      Hi Jessica,
      It’s hard to say without seeing your exact code and how you have pasted it. But it seems it is not taken into account from what you are describing…
      Cheers

  • Jacqui

    Hi Nicholas,

    This looks like an awesome feature and I’m hoping to start using it in the next couple of weeks. One question – is it possible to have both a background image and a video appearing together? I’m imagining a full-width, centred image and the video to the right of the call to action, so that it doesn’t distract from the CTA.

    Thanks,
    Jacqui

  • Brennen

    Nicolas,

    I haven’t been able to get this code to work at all. Like two other people who have posted here I am getting the following when I visit my site, “https://www.youtube.com/watch?v=o-AbEO6J8s0&cached=1418937638”. Do you think it is because I am running version 3.2? Does this work with Customizr Pro? If you could please address this it would be greatly appreciated. Thank you for your time and consideration. Cheers

  • Nick

    Has anyone figured out how to stop related videos from showing.

    tried adding parameter
    tried adding &rel=0 and ?rel=0

    neither work.

    Thanks

  • ZB

    I recognize some of the spots where I need to add in my specific coding/youtube information, but how to I know exactly where I need to add in any other information or what I actually need to cut and paste for the CSS to work? I can’t tell exactly what is instructions and what is actual coding in some spots. all the // are slightly confusing me. Sorry for my ignorance. Thank you for your time.

  • Rondon

    This code snippet is awesome! Is there anyway to remove the youtube video links after the video ends?

    Adding the “?rel=0” after the video link usually does the trick but it doesnt seem to work here. I’m pretty sure I’m not putting it in the right spot.

    Normal Working Example:

    Thank you!

    • Nicolas Post author

      Hi Ganfall, you’ll want to check if you have properly setup all function arguments.
      (Note : this snippet requires quite advanced skills in php, you’ll want to make sure you fully understand how the php functions arguments and how to change theme php functions )

  • Casper

    Hi Nicolas,
    Thanks for the advice. I wasn’t talking about some bug though. It also shows a black screen on my Android phone. The movie will not be played. I read somewhere this is not a bug, but a feature. Mobile browsers aren’t capable of using autoplay, because this might result in unwanted high costs for 3G connections.

    So, to overcome this problem I would like to show a normal slide image (placeholder) on mobile devices instead. Since I use your wonderful video slider as a banner, it seems a bit weird having to start a banner manually to me. The lazy video plugin is nice, but disables the autoplay feature. The whole thing I want to achieve is an awesome UX by showing a cool background video that plays automatically. For mobile users I will except a fallback option by just showing some awesome images instead.

    Hope my problem is clear now. My guess is I am not the only one looking for this solution. Some how this website just skips showing the banner as a whole on my mobile. How did you achieve this?

    One last thing. Do you happen to know how to disable the video suggestions Youtube gives after playing the total movie?

    Thanks again!
    Casper

  • Casper

    Hi Nicolas, let’s start by saying I absolutely love the Customizr theme. It is awesome. I am totally new to WordPress (just started a few weeks ago), but your theme is really easy to customize so far. On top of that, I love this website. I taught me a lot about the functionalities of WordPress, CSS and even PHP is starting to become more clear now. Great job!

    Currently I am playing aroung with some stuff to see how it works. Using your code snippet above I got a full width video playing without a problem. Unfortunately I found out that the “autoplay” feature is not supported on mobile browsers. So now this leaves a black page when looking on my mobile. Could you give any advice on how to show a placeholder image instead? I have been Googling this for hours now, but can’t find out how to do this. It is either not the right solution, or technically over my head (still).

    Thanks for your time!
    Casper

Comments are closed.