YouTube/ Vimeo Video Outro Script
Description: This jQuery plugin lets you add a custom "outro" to the end of embedded Youtube or Vimeo videos on your site. Youtube/Vimeo typically show related videos once a video has finished playing, though with this script, you can overlay that with a custom DIV showing any desired content instead. The script works by dynamically detecting when the user is at the end of a video, and transitioning in a custom outro when that happens.
Youtube/ Vimeo Outro script works on any IFRAME housing a Youtube or Vimeo video. The only requirement is that the IFRAME be wrapped in a DIV that snugly fits the IFRAME, as the plugin injects the outro DIV into this container.
Demos:
Directions:
Step 1: Insert the following code in the HEAD section of your page
The code above references the following external files (right click/ select "Save As"):
By default, upload these files to the same directory as where your webpage resides.
Step 2: Insert the below sample Youtube and Vimeo videos markup to the BODY of your page.
And that's it for installation! Read on for more details on setting up the Video Outro script.
Markup for a Youtube or Vimeo video
The markup for your Youtube or Vimeo video should simply be the original IFRAME embed tag supplied by Youtube or Vimeo, but wrapped in a DIV that snugly fits the IFRAME. The reason for the extra wrapper is so the Outro script can use it to inject the outro DIV into, with the later spanning the entire area of the wrapper. This is why the wrapper should fit the IFRAME snugly, so the outro DIV covers the video precisely. Luckily ddvideooutro.css makes sure this is the case already.
The following markup displays a Youtube video that's fluid in
dimensions (16:9 aspect ratio), expanding and contracting based on the width of
the parent element (ie: BODY tag):
<div id="youtubediv" class="videowrapper fluid"> <iframe type="text/html" width="640" height="390" src="https://www.youtube.com/embed/bZuzfTQZ4TA?rel=0&autoplay=1&enablejsapi=1" frameborder="0"></iframe> </div>
Notice the two CSS classes in red, which based on the styles defined inside ddvideooutro.css creates a video container that's fluid in size. The ID attribute helps the script target this particular video container later to add an "outro" effect to it.
For Youtube videos, you can
insert parameters at the end of the video URL to control certain aspects of
it. Here we're adding "?rel=0&autoplay=1" to inform the script to
show no related videos at the end, plus automatically play the video when the
page loads.
IMPORTANT: The parameter "enablejsapi=1"
must be added to your Youtube videos' URL inside each IFRAME in order for
the Outro script to work properly. It sets the proper permission for scripts to
control the video player.
Moving on, you can also display a video that's fluid in
dimensions but with a maximum width (so the video container never exceeds that
width). To do this, simply wrap the markup shown above in another DIV with
"max-width" defined, for example:
<div style="max-width:640px"> <div id="youtubediv" class="videowrapper fluid"> <iframe type="text/html" width="640" height="390" src="https://www.youtube.com/embed/bZuzfTQZ4TA?rel=0&autoplay=1&enablejsapi=1" frameborder="0"></iframe> </div> </div>
And finally, if you want your Youtube or Vimeo video to be fixed in dimension, the following markup does the trick:
<div id="vimeodiv" class="videowrapper" style="width:640px;height:368px"> <iframe type="text/html" width="640" height="368" src="https://player.vimeo.com/video/182169177?portrait=0&title=0&byline=0&badge=0&autoplay=1" frameborder="0"></iframe> </div>
Notice that we still add a "videowrapper" class to
the IFRAME's parent container, but not the "fluid" class this time.
Instead, we define explicit CSS width/height properties to set its dimensions in
stone.
In the last example, we're embedding a Vimeo video. We've also added parameters to the end of the URL to customize its behaviour as Vimeo makes available, in this case, to hide any extraneous info that by default shows up at the beginning of the video such as "title", and also, to auto play the video.
Initializing the Video Outro script on a video container
With the expected HTML structure for our Youtube or Vimeo embeds
out of the way, next is to initialize the Video Outro script on them. Inside the
HEAD section of your page, call the jQuery function $(selector).ddvideooutro(),
where selector is a valid jQuery selector referencing the video IFRAME"s parent
container. At its simplest this looks like the following:
$(function(){ // on DOM load
$('#youtubediv').ddvideooutro() // initialize outro on Youtube video container
})
where "#youtubediv" references the video container
with ID "youtubediv", with no options passed into
ddvideooutro().
Outro template customization
By default when you call $(selector).ddvideooutro(),
the plugin looks for a hidden DIV on the page with ID="outrotemplate"
that you should define to use as the contents for the outro:
<div id="outrotemplate" style="display:none"> Outro contents here... </div>
This DIV acts as a "template" that each video with an outro on
your page draws upon by default to populate its outro using. You can specify a
different template DIV on the page to use when calling $(selector).ddvideooutro()
by passing in the "templateid: id" option:
$(function(){ // on DOM load
$('#youtubediv').ddvideooutro({
templateid: 'outrotemplate2'
}) // initialize outro on Youtube video container
})
With the "tempateid" option defined, the selected
videos will look for a template DIV on the page with the specified ID (ie: 'outrotemplate2')
as the source of their outros' content.
Modifying the bottom gap between the outro and video container
When an outro slides down at the end of a video playback, it
leaves a gap at the end so the video controls aren't obscured. The default
length of the gap is 42px (as specified inside
ddvideooutro.css), which plays nicely with Youtube videos. For vimeo videos
where the controls are larger, a gap of 50px works better. To modify the outro
bottom gap from the default value defined inside
ddvideooutro.css, make use of the bottomgap option when
calling $(selector).ddvideooutro():
$(function(){ // on DOM load
$('#youtubediv').ddvideooutro({
bottomgap: 50
}) // initialize outro on Youtube video container
})
This creates a 50px gap between the bottom of the outro and video player.
Lack of outro gap on mobile devices
On mobile devices, the embedded Youtube or Vimeo player doesn't
show any controls at the end of the video playback. The default 42px gap at the
bottom of the outro therefore becomes unnecessary. Inside
ddvideooutro.css, the CSS @media
query at the very end removes the gap on devices with device width 750px or
less:
@media (max-device-width: 750px){ /* on mobile devices*/
div.ddoutro{
bottom: 0 !important; /* Outro should slide down completely (no gap at the bottom) */
}
}
Adjust the media query as desired to target more precisely particular mobile devices.