If there is a video you wish to add on your website or page, you can easily get one set up by embedding it. Below are the steps on how to achieve this.
Table of Content
Step One: Copy Embed Code from YouTube or Other Source
On YouTube:
Find and open the Video you want to embed, then click the "SHARE" button under it
Click "Embed"
COPY the embed code from the box
Step Two: Paste the EMBED CODE into the SOURCE of your "Content Editor" stack item.
In the Admin, navigate to the page you wish to place the video on
Add a new "Content Editor" stack item to the page (or find an existing item)
Click the blue link of a Content Editor stack item
Click the "Source" tab (this allows you to view or edit the content in code form)
PASTE your EMBED code here
Step Three: Adjust the Size for the Embed
For any embedded video, make sure the width and height - underlined in blue in the image below - are adjusted so they are appropriate for the area on your website in which the video will appear. For most pages, it is recommended to have:
100% for the width, and
416 for the height
These are the preferred to have the video fit in the stack item when viewing them on desktop or mobile; however, you may have to adjust the height to something smaller if you plan to place it in the right/left column or in the columns within a three-column layout. For instance, the height can be:
270 in the left/right column for a two-column layout,
200 in the left/right column for a three-column layout, or
315 in the middle section for a three-column layout
These changes can be made through the embed code, as shown below.
Note: Only change the numbers in the quotations. Changing anything else will mess up the embed.
Can I edit the embed without using the SOURCE tab?
Yes, you can. If you exit out of the "Source" tab by clicking it (or click the "Save Changes" button), you will see a box with the word "IFRAME" in it. Technically, this is the iFrame box containing your video embed.
If you right-click it and select "IFrame Properties" (or double-click the box), it will open the "IFrame Properties" pop-up, where you can update its settings - and it includes the ability to adjust the width and height for the embed.
To manage this, you can follow these steps:
With the "Source" tab deselected, right-click the iFrame box and select "IFrame Properties, or double-click the box.
In the "IFrame Properties" pop-up, change the width and height. You can refer to the sizes mentioned in Step Three on what to set up.
It is recommended to have the width set as 100% so the embed can fit in the section it will display in.
Click the green "OK" button.
Are you unsure of the appropriate size for the embed of your video? Contact Envisionwise / LinkedUpRadio at support@envisionwise.com or at 217-239-0975.
Step Four: Click "SAVE CHANGES"
Note: If the menu of your site seems to disappear behind your embedded YouTube video, add the parameter in the example below.
Example iFrame code:
<iframe title="YouTube video player" width="525" height="325" src="http://www.youtube.com/embed/ucowE8dtNqM" frameborder=”0″ allowfullscreen></iframe>
Code With Fix Applied:
<iframe title="YouTube video player" width="100%" height="416" src="http://www.youtube.com/embed/ucowE8dtNqM?wmode=transparent" frameborder="0" allowfullscreen></iframe>
Need More Help? Use the Support icon in the bottom right for help,
call us at 217-239-0975, or email us at support@envisionwise.com.