View Demo
Download
View on Github
Supported video sites
- Blip.tv
- Break
- CollegeHumor
- Dailymotion (inc Playlists)
- FunnyOrDie
- Iframe (transforms general iframe embed codes into responsive ones without junk)
- Gametrailers
- Liveleak
- Metacafe
- Movieweb
- Myspace
- Myvideo.de
- Snotr
- Ustream
- Veoh
- Viddler
- Videojug
- Vimeo
- YouTube (inc Playlists and start-time)
- More in future versions
In Euro(pe)
What it is
- Simple
- Lightweight
- Responsive
Features
- One single button
for all providers - Responsive embeds without any need for Javascript
- Unique thumbnail mode
- 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 (does not work with all providers)
- Optional maximal width
- Colorbox integration (lightbox)
- Video alignment
- Loads the CSS compressed into the HTML head, no extra HTTP request, fast loading without any caching plugins
- General iframe support for any provider that not included that support iframe embeds. Can be used for any URL but will always be a ~16:9
- Detailed description of options in-place, also available translated into German.
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.
Thumbnail:
This requires jQuery Colorbox to be loaded. This simply transforms your Shortcodes into a 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. Watch the Thumbnail Demo test here.
Installation
If you want to use the `Thumbnail Mode` you need to install the jQuery Colorbox Plugin or make colorbox load in any way on your WordPress.
For most webhosts the usual way:
WP Dashboard -> Plugins -> Add New -> Search ‘Advanced Responsive Video Embedder’ -> Install -> Activate
Manuall install:
- Extract the zip file
- Upload the `advanced-responsive-video-embedder` directory to the `/wp-content/plugins/` directory
- Activate the plug-in through the ‘Plugins’ menu in WordPress
Usage
- Make some Options in Settings->A.R. Video Embedder if you like
- Click the Video icon in your WordPress rich text editor, enjoy!
Notice
If you want to manually create Shortcodes, here are the old instructions, but remember that its easier just to paste the URL/embed code in the buttons dialog.
If Videos work on phones or tablets depends on the video provider. If the provider only serves in Flash it won’t work on Apple.
What it does NOT
- lots of customization / options
- use of oEmbed, completely useless and unnecessary for video embeds in my opinion, providers send all sorts of junk HTML, inline CSS that’s not needed. Embeds by this plugin are created the same simple way for every provider. Unfortunately they still can do what they want in iframe, Collegehumor for example puts a white line with a Facebook like button under the video but all others serve clean video. Watch the test page.
Contribute
The plug-in is currently in beta and needs testing. If you find any bugs then report them on the WordPress Forums.
The regular expressions to detect the ID’s might not be perfect, if you notice a ID not being detected right or not at all please report it.
Fake thumbnail mode is currently automatically disabled for this providers because they serve the video (inside iframe) without wmode=transparent what causes ‘clicking through’ the invisible links instead of opening the lightbox. Comedycentral, Gametrailers, Liveleak, Movieweb, Myvideo, Snotr, Viddler. If you happed to know that there are parameter options to make them serve the video with a wmode=transparent let me know in comments below.
If you like to translate the Plugin please go ahead and send me the translation files. I recommend the Codestyling Localization plugin to do it.
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.com/plugins/advanced-responsive-video-embedder/thumbnail-test/
My Youtube video from: http://teambillionaires.net/what-is-vmobile/
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?
Thanks for the quick fix. I don’t have error codes everywhere now, but it’s not pulling images from vimeo?
No problem, that was not a error code, it was all options printed out just for me. I forgot to take it out
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!!!
Can I Use this plug in to embed my own uploaded files?
No sorry.
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.
Do you mean real Fullscreen or the Colorbox overlay? Can you give me a link where I can see the problem?
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
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
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
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.
You should completely uninstall and delete this other plugins you installed. Did you did that when you are speaking of reverse all the changes?