Advanced Responsive Video Embedder

What it is

  • Simple
  • Lightweight
  • Responsive
  • Customizable

Features

  • Embeds via pasting the URL in its own line just like WordPress!
  • Optionally use Shortcodes instead
  • One single button tinymce-icon for all providers (for most providers not required anymore since 3.0)
  • Responsive embeds with CSS
  • Unique thumbnail mode with Colorbox integration (lightbox)
  • Tries to be as unobtrusive as possible (sets ‘hide brand’ variables to true if supported, uses youtube-nocookie embeds)
  • Clean Shortcode syntax [vimeo id="123456"] no ugly URLs, no unnecessary Shortcode wrapping.
  • Autostart (for providers that support them)
  • Custom URL Parameters to use all options providers offer
  • Optional maximal width
  • Video alignment
  • General iframe support for any provider that not included that support responsive iframe embeds or any URL you with to display in a iframe.
  • Detailed description of options in-place, also available translated into German, French and Spanish.

Supported providers

  • 4players.de
  • archive.org
  • blip
  • break
  • CollegeHumor
  • Comedy Central URL
  • dailymotion native thumbnail
  • flickr URL
  • Funny or Die native thumbnail
  • gametrailers URL
  • iframe URL, fake thumbnail, iframe
  • IGN
  • kickstarter
  • LiveLeak
  • metacafe
  • movieweb fake thumbnail
  • MPORA native thumbnail
  • myspace
  • MyVideo fake thumbnail
  • snotr fake thumbnail
  • spike URL
  • TED Talks
  • twitch
  • USTREAM fake thumbnail
  • veoh
  • vevo
  • viddler fake thumbnail
  • videojug URL
  • vine
  • vimeo native thumbnail
  • XTube
  • Yahoo Screen
  • YouTube native thumbnail

URLOnly supported via Shortcode
iframeGeneral support for providers that offer iframe embed codes that can be displayed responsively.

Modes

  • Normal
    Responsible embeds automatically re-sized to 100% of your content area. You can set up a maximal width if you don’t want to let the video get bigger then you like it.
  • Lazyload
    Sizing behaves like normal mode. Loading of the thumbnail image if supported and on click loading and autoplaying (if supported) the video. If Provider not supports native thumbnails this mode acts like normal mode accept that it forces autoplay=no.
  • Thumbnail This requires jQuery Colorbox to be loaded. This simply transforms your Shortcodes into thumbnails and when you click on them it will open a big video in a Colorbox. It will get thumbnail images from providers that support them, currently this is Youtube, Dailymotion, Vimeo and Blip.tv for all other providers you have the option to emulate a thumbnail called “fake thumbnail” and load the actually video player in thumbnail size with a invisible link on top of it to open the Colorbox. If fake thumbnails are disabled, or not possible they are displayed as black videos or you can pick your own thumbnail image.

Contribute

Code review/improvement

I would like if some developers would look at the code and giving some feedback.

Translations

Please register here and then you can login at translate.nextgenthemes.com to help translate the plugin.

Write a review if you like it

Extensive testing

Despite that thousands of users use it without problems some testing always helps. Just try to break it by using all kinds of options/parameters/providers.

If something in those version goes wrong please report it and I hopefully will not release bugs to WordPress.org.

Author

Nicolas Jonas

Contributors

Special thanks goes to:

  • Karel neo.fr – Initial French translation
  • Andrew Kurtis webhostinghub.com – Initial Spanish translation
  • Ilya Grishkov – Idea and initial Code to cache thumbnail URLs
  • Everybody who reported a bug or donated.

67 thoughts on “Advanced Responsive Video Embedder

  1. Arjay Talosig

    Hi,
    Well done with this plugin! Im very impressed how light it is but beautifully made.

    It would nice to add an Align function in MyGallery Shortcode button for the rich text editor. When I installed your plugin all my videos stayed on the left side until I discovered your Manual Shortcode creation page where you gave an example: [metacafe id=123456 align=left]

    Question: How come the background of your lightbox (when the thumbnail of the video is clicked) is black while mine is white? Where can I edit that?
    Sample:
    Your Youtube video from: http://nextgenthemes.local//plugins/advanced-responsive-video-embedder/thumbnail-test/
    My Youtube video from: http://teambillionaires.net/what-is-vmobile/

    1. nico Post author

      Thanks, actually it should not be named “My Gallery shortcode” and it was actually my intention to make the button dialog able to create the align i mistakenly called it float, Will be fixed in next Version. By default it’s created without a align class so it’s left but the text will not be on the right side of the videos. In case you think all your videos are align left by default.

      As for the the black background, that is a option you can setup in the jQuery Colorbox plugin, like i said I recommend theme 3. In addition to that I changed the opacity of the overlay from 85 to 95 i think, so if you do that your Videos should look like on my demos.

      But let me ask you: Why is your video open in such a small size, my plugin makes the lightboxes very big, at least on my demos. Did you make some settings in the Colorbox plugin?

    1. nico Post author

      No problem, that was not a error code, it was all options printed out just for me. I forgot to take it out ;)

  2. Lynne

    I apologize, that one was on me. It works amazing now!!! Thank you so much!! This is the BEST plugin I’ve found for embedding videos and it’s the only one I know that allows you to size the video so easily! YOU ROCK!!!

  3. Andrew

    Hello, THANK YOU for making such a fantastic plugin!!! It works great in every way so far…except that when a Vimeo video held within your Vimeo and/or iFrame shortcode is toggled into fullscreen mode, the GNS (global navigation system) on my site remains on top of the fullscreen video. I’ve even set the z-index of the GNS from it’s standard 99999 down to 9, and still it appears atop the fullscreen video held within your plugin. Note: when I embed a Vimeo video as-is, without the inclusion of your plugin, the aforementioned issue does not happen; therefore, I have concluded that it is not a Vimeo issue, but one regarding your plugin. What can I do about this? Thank you kindly.

    1. nico Post author

      Do you mean real Fullscreen or the Colorbox overlay? Can you give me a link where I can see the problem?

  4. Clive Corner

    Hi I am testing out your plugin and have noticed that everything works fine until I try a vimeo video with firefox which doesn’t have Flash on a mobile. When I try this it tells me to use a browser with Flash.

    Regards and thanks

    Clive Corner

    1. nico Post author

      Well sorry but this plugin does no magic, it embeds videos with Iframes from the provider, if Vimeo only serves Videos in flash then I can’t do anything about it. Go lobby Vimeo for HTML 5 video ;)

  5. Jason

    I really love this plugin, thank you. It solved a lot of my headaches!

    I am using this primarily for one video. Can I pay you to tell me how to add a background image to my iframe, which would also be responsive with the video.

    Regards,
    Jason

  6. Alun

    Hi,

    Thanks for the plugin, looking forward to using it but after initially appearing in my ‘available plugins’ menu, it has since disappeared. It isn’t in the inactive plugins menu, but still shows as an installed plugin.

    The change occurred after I moved an existing meta post video plugin into a sidebar whilst playing around with a page. Have since reversed the changes I made, but your plugin has not reappeared.

    Do you have any ideas?

    Any response gratefully received!!

    Regards

    Al.

    1. nico Post author

      You should completely uninstall and delete this other plugins you installed. Did you did that when you are speaking of reverse all the changes?

    1. nico Post author

      Actually the TED Talks works just fine, there is nothing you need to add. Just paste the Iframe embed code from TED talks into the buttons dialog or manually create [iframe id="http://embed.ted.com/talks/SOMETHING.html"]

      1. Gerrit

        Hi, first of all great plugin! Works very well with a lot of videos videos, even with Ted talk. The only thing is i can`t seem to stop it from auto playing. I have used: [iframe id="http://embed.ted.com/talks/lang/nl/luis_von_ahn_massive_scale_online_collaboration.html" mode="normal" autoplay="no"] (and several variations) but it alway autoplays! Any ideas?

        Thanks.

        1. nico Post author

          This is a problem with TED Talks. I don’t know of any custom parameter we could use to stop it, their Iframes autoplay always. Ask them if there is a way to stop it and report back to me please.

  7. Todd

    Is there any way to set a YouTube video so that it doesn’t show related videos after it plays, and instead returns to the thumbnail?

    Thanks!

    1. nico Post author

      Actually this plugins already adds the rel=0 parameter so there should no related vids be displayed. It’s working on the demosite. I have read that a person said he needed to add showinfo=0 to meke it work, but I not want to have no videoinfo and so far it’s working. Maybe youtube disallows that for some videos or something or this was temporarily. I see it’s working well on your site with my plugin ;) only for me?

  8. Joost Slijkoort

    Neat plugin! The only thing i miss is the autoplay option in the shortcode; the global autoplay setting wasn’t that useful for me. I’ve editted the plugin, extracted ‘autoplay’ in ‘do_shortcode’ an placed it in ‘arve_build_embed’.

    Now i can specify autoplay manually in the shortcode, would be great if you fix this in an update :)

  9. ashok

    Hi All,

    Using this plugin I want to play my vimeo video from certain time how should I?
    Example I have 6 min video and I want to start it from 1min 60 sec. How to do it?

    Thanks
    Ashok.

    1. nico Post author

      New feature in 2.5 you can now add the time with time="6m3s" in the shortcode ;)

    1. nico Post author

      No sorry. Not sure if I want to include this since I like to keep the plugin very basic and simple. But if many requests fly in I might reconsider.

    1. nico Post author

      Where does it say bad gateway? You trying to update it through WordPress dashboard?

  10. Tamara

    Thanks again for this plugin. I’ve been able to install the update but my problem now is that some youtube video ids work and some don’t? I’m applying the same instrutions: [youtube id="hbQE3p6E4-8w"]

    Some work some don’t. Any recommendations?

  11. justin

    HI Nico,

    so far so good with the plugin. I’m using the plugin in “thumbnail” mode with vimoe and align=left. But the text to the right of the thumbnail is right against the thumbnail. If I add spaces to line 1 its not a problem, however additional lines don’t follow suite. What do I do to create a bit of vertical space around the thumbnail?

    Thanks!

    1. nico Post author

      That has to do with your theme, some only add margins to the .alignright .alignleft classes if they are added to images. I will add this to some the next version coming up.

      For now you can add this to your CSS:

      .arve-thumb-wrapper.alignright {
      	margin-left: 20px;
      }
      
      .arve-thumb-wrapper.alignleft {
      	margin-right: 20px;
      }
      
  12. stacey

    I can’t seem to get the Colorbox lightbox to work with your plugin. Can you be more specific as to the settings we need to enable in Colorbox to work with your plugin? I would really love to use the lightbox function! Thanks!

    1. nico Post author

      You need to have the Jquery colorbox plugin installed and use the thumbnail mode then is should work without any special settings.

  13. Noman

    Hi,
    How can the plugin / video call can be added in theme. ? we have featured video on home page.

    Now how to call the plugin in theme i.e. in php file ?

    can you help ?

  14. Alex

    Hi, is it possible to embed Videos via https – ssl ?

    Great Plugin! Thanks!
    Alex

  15. Stefano

    I recently update the plugin (15 min ago) and now it’s not working. It is causing some issues to my sharing plug in. Do you report this issue?
    Thanks

  16. Jason

    Hi. Love the plugin!
    The latest update broke it though. The ‘maxwidth=undefined’ by default results in an error when just pasting in a YouTube URL. If I remove the maxwidth parameter videos go back to working but I’d hate to have to set this each time.

    Thanks!

    1. Tamara

      Hi Jason,

      Thanks for sharing that info because I was noticing that as I was pasting Youtube video IDs as I’m supposed to it was not working. This is a very nice plugin and I hope we get 2.6.1 soon!

  17. Renideo

    Found the problem, was a compatibility problem with Jetpack and the their subtitution code. So I desactivate it, now it working like before.

    Thanks for this plugin by the way :)

    1. nico Post author

      You can by the way change the shortcode in the options (“youtube” to “arveyoutube” or something in your case) and use both. But I guess that makes no sense anyway for most people.

  18. Mark Hickman

    Hi and thanks for this plugin.

    I notice when I view the video in Firefox it appears a be quite jerky, also in chrome, but (Unbelievable but true) its smooth in IE.

    Any clue for me why this might be please.

    Thanks

  19. nico Post author

    What more detail do you want? I taught it’s because you use 2 Plugins for one shortcode at at time. And it looks like I was right. So your Youtube videos are playing now?

    Anyway this Iframe thing is actaully really a issue I found. Will be fixed in next version. Thanks.

  20. maschine

    Quick question, I am no longer able to pick “iframe” option or any other options that used to display when using the “show more options” button. This is the option I have been using to embed my iframe videos from my video host. The plugin will not detect iframe from the embed code or the url.

    1. nico Post author

      I intentionally removed that because I like to nobody have to go there an everything detected. Could you give me some of your codes that are not being detected correctly and I will probably fix this.

  21. Mike

    I have problems with the configuration of a youtube playlist that is updated frequently. if I put direct link to playlist it will it will display a message “No ID” if I try the share button under the playlist in youtube, it will take the ID of the first video and if I update the playlist on youtube on my website it will not update, it will continue to play the old video.

    Any suggestions? thanks.

  22. Giovanni Sanguily

    Hi Nico,
    We love your plugin but we’ve been running into a problem lately. IT seems that when we first install your plugins it can read and identify the Vimeo embed codes but then after a few days all the sudden it stops accepting the embed code from Vimeo.

    So then I switched to just using the video URL from Vimeo but now I face another problem it seems not matter what website I install a Vimeo video using your plugin I get these black bars that appear on the top and the bottom of the videos check out these URL’s

    http://leadm.staging.wpengine.com/vaas/

    http://zodiac.wpengine.com/backup-disaster-recovery/

    Is there a way that we can pay you or purchase and updated version of the plugin that has a fix for this. Please advise Thanks

      1. Giovanni Sanguily

        Thank Nico,
        That fixed it I will donate for sure thanks for the great plugin. Also do you do any custom plugins? My company would be happy to work with you to create some unique plugins for our clients.

        1. Giovanni Sanguily

          Thank Nico,
          That fixed it I will donate for sure thanks for the great plugin. Also do you do any custom plugins? My company would be happy to work with you to create some unique plugins for our clients.

          I just donated $100 stay in touch I would like the opportunity to work with you more on future projects

          1. nico Post author

            Wow! 100 Dollars, that’s 5 times as much as the biggest donation I ever got. Thank you very much. I want to start a business with WordPress and am currently working on a theme framework and themes for it. I am working all day (or/and nights) on it so I don’t think I am up for custom work. But let me know what it is what you are looking for, if it’s a really small project I might rethink.

            Thank you again, that makes me very happy, I can definitely make use of that money for my upcoming things ;)

  23. Rob

    Nico, The plugin is awesome! Have a question though. When the page is viewed on an iPhone or iPad, the video is cut off at the bottom, but there is room in the “box”. We are using the “Responsive” theme from CyberChimps (used to be ThemeID), so the problem may be in the home page “content area” size rules… but not sure. We are using Vimeo. Any ideas or suggestions?

    Here is the URL: http://barkmicrostudios.com

    1. nico Post author

      Looks like a conflict with the theme or another plugin. I looked at the code there are classes like ‘fluid-width-video-wrapper’ in your html that are not created by this plugin, they use the same technique as me but a little different aspect ratio, that is causing the cutoff. You should contact CyberChimps if your not having other video plugins installed and ask them about it.

  24. Howard

    Just donated $10. Really nice plugin.

    I assume you cannot use a thumbnail and have auto play ? I know, that seems like a silly question.

    Thank you for the plugin.

    1. nico Post author

      Oh thank you that is great!

      If you click on thumbnails they should autoplay with in the colorbox that opens for most providers, if you mean auto opening and playing thumbnails in colorbox: No you cant have that.

  25. Ehud Segev

    Just donated $10 as well, Nico – great job. Exactly what I needed.
    I have a responsive template but I always have issues with my embedded youtubes, but you just solved it and make it look BEAUTIFUL!!!!

    Thanks! Keep developing great stuff for us!

  26. collin

    Here is what I cant wrap my head around. I have tried all these plugins and still no luck.

    I have a ‘blog’ section to my site. I want to achieve infinite scroll, either a video plays on demand or there is a picture or verbiage etc. At this time I have to click into said post to see the video now appear, it is not otherwise visible unless I add a thumbnail or placeholder.

    How is it I can add first tier video play without using snapshots. Ive been googling for hours.

Comments are closed.