You have two options for embedding video content within pages, you can use the standard "iframe" option in the advanced text editor (CK Editor) on several widgets, or you can use the Source option in the same editor.
Getting your Embed Code
The first thing you need to do is go to Youtube, Vimeo or wherever is hosting the video content and grab the embed code they provide. It should look something like this;
Now you're ready to put this into your site.
Using the iFrame Option
In a widget with the CK Text editor option (Content Bar Full Width for example) click on the iFrame option (last option on the second row). This will open a popup screen where you need to type on the following information;
- URL - this requires you to strip out the URL component of the <iframe> code and past it here. You can find this section in the quotation marks after "src=" - highlighted below;
- Width - you can create whatever width you'd like, however a good width is 100%. This means the width of the video will automatically scale to the size of the screen the user has.
- Height - unfortunately you cant easily set a dynamic height (like the width), so you'll need to pick a default height. 450px is a good option.
- Align - you can right, left or middle align the video content. Middle alignment is typically good for content that will be taking up the full width of the screen.
- Name - optional, feel free to name the content to be in line with its purpose.
Click "OK" button once complete. You'll now see a red "iframe" box - if you need to edit this you can double click on the box, otherwise you can save and publish the page and check out how it looks.
Using the Source Option
Using the Source option has the same end output as the iFrame option, however instead of dissecting the iFrame code that youtube or vimeo provide you, you are simply pasting it into the page. To do this open your widget with CK Editor available (Content Bar full width for example), and then click on the first button in the options, called "Source". This will change the view from your simple editor to be a html editor (ie code based editor).
Now all you need to do is paste in the embed code that youtube provided where you want it to go. Note that you might still want to change the height and width to be 100% and 450px respectively, you can do this by editing the values for height and width in the quotation marks.