Menu

You Tube Embed

Stacks Image 981

Stack Info


  • The You Tube Embed stack enables you to insert responsive You Tube videos onto your site quickly and cleanly. With lots of options you can control how to video is displayed to match with your websites style.

  • Current Version: 1.0.0

  • Release Date: 30th July 2013

  • Last Update: N/A

  • Responsive: Yes

  • Requires: Rapidweaver 5+ and Stacks 2+

  • Browser Compatibility: IE7+, Safari, Chrome, Firefox

User Guide

COMING SOON

The You Tube embed stack was designed to be deployed as quick and as easy as possible, if you are looking for a bit of guidance about where to start follow the steps below to get your feet off the ground.
Stacks Image 1084
Click to enlarge
1- When you drag your You Tube Embed stack out you will see the screen pictured above
2- To get your video displaying you will need to enter the Video ID in the stacks option pane, if you are having trouble finding the Video ID please refer to the section below
3- Change the settings below the video ID to change how you would to display the video such as enabling Auto play and Hiding Information
4- Set a start time for the video, leave at zero if you would like to start from the beginning
5- The video is set so it expands to the pages max size, if you would like to limit the max size of the responsive video you can by checking the "Limit Width" box and entering the dimensions you would like to display. For more information on limiting the width of the player please the section below.
Stacks Image 1090
Click on the options below to expand more information
Video ID
Insert the video ID of the video you would like to display. For more information on what a Video ID is and where to find it please refer to the section below
Theme
Select the theme of the player; there are two options, Light and Dark
Progress Bar
Select the color of the progress bar, by default this is red.
Start Time (Secs)
Enter the number of seconds you would like the video to begin from, leave at zero to start from the beginning
Autoplay
Enable this box to play the video automatically when the page has loaded
Show Related Videos
Enable this box to display related videos to the user after the video has finished
Show Video Info
Enable this box to show the videos information before the video starts and when the users cursor goes over the video. The info displayed is the video title, uploader and user avatar
Hide Controls
When this box is enabled the controls for the video will not be shown
Hide Annotations
When this box is enabled video annotations are hidden from the video. Annotations are snippets of text put inside the video by the video uploader
Hide YT Logo
Enable this box to hide the You Tube logo from the control bar of the video. Note- The You Tube text will be displayed in the info bar instead when enabled
Limit Width
The You Tube Embed stack automatically fills out to the maximum possible container, to limit the maximum dimensions of this stack check this box. When enabled two new input boxes are displayed below
Max Width
Input the maximum width you would like the container to display. WARNING- Please use dimensions recommended in the limit dimensions section below for best results.
Max Height
Input the maximum height you would like the container to display. WARNING- Please use dimensions recommended in the limit dimensions section below for best results.
Alignment
Select the alignment you would like to display on the video. This only aligns the video when the dimensions are limited as the video automatically fills out the space it is in.
For the stack to find the video you would like to display a Video ID is required, the video ID can be found very easily following the instructions below
Go to the web page of the video you would like to use to display on your site, look at the web address in the URL bar and your You Tube Video ID is the sequence of numbers and letters following "v=" and before the & (in some cases)
If we take a look at the You Tube URL below the Video ID is in bold.

http://www.youtube.com/watch?v=x2IezNDS_nU&fullscreen=1
The You Tube Embed stack is responsive and because of this the video player is designed to be a 100% width and height which means it will expand to the max space of the container it is in. In the stack there is an option to limit the max width and height, the container will still be responsive but it's starting size will be the values you set.
This feature can be used with any input and the videos will re-size to those dimensions but for best results it is recommended that you use the dimensions below for the best results.

Recommended Dimensions
560x315
640x360
853x480
1280x720

Custom Dimensions
To configure the best dimensions for your max video size please use this online aspect ratio calculator
http://size43.com/jqueryVideoTool.html
The video player is being cut off at the bottom
Due to the way some themes are built some cropping of the bottom section of the video may occur. This is easily fixed by adding bottom padding to the stack.
I have hidden the You Tube Logo in settings but it is still displaying on the Info Bar
This is part of You Tube settings, when the logo on the control bar is hidden it automatically replaces it with the You Tube text link on the info bar
How do I know if there is an update
You Tube Embed uses the auto updater that is built into the stacks plug in, it will alert you when an update is available. Please follow the instructions on the updater to guide you through the process. If you are having problems you can re download and re install You Tube Embed using your original download link
How can I re download You Tube Embed?
Please visit this link and enter your details to be resent your invoice which includes your download link.
https://pressuredesigns.cartloom.com/lookup
Limiting the width is giving a lot of black space around the video
When Limiting the width you need to be respectful of the aspect ratio of 16:9 which You Tube uses. To calculate the best dimensions use this calculator below
http://size43.com/jqueryVideoTool.html

Demo