How to Embed from Streaming SitesThe embed process is fairly simple, and will be very similar from site to site. Using YouTube as an example, its as simple as:
1 - Find the video you wish to show on your site on the YouTube page. If its a video you produced, you will need to sign up for a YouTube account and then upload the video. YouTube documentation can assist with this process.
Once you have located the video, click the SHARE button, as shown below.
2 - In the pop up window, click on embed, as shown below.
3 - You will then be presented with a list of options. Set these as required, or leave as default if you are unsure.
TIP - its a good idea to untick the box "Show suggested videos when the video finishes" as this can potentially show videos that may detract from your chosen video, or even show competitors. This is highlighted as #1 in the below image.
Once you are happy, click on COPY, as shown in #2 below.
4 - This will copy the iframe code, which can then be used on any page or post you choose within your WordPress or Joomla site, see below for how to add to your site.
How to Add iframe code to your Joomla or WordPress siteAdding the iframe code can seem a little tricky, but its generally not that hard once you have done it a few times. There are a number of plugins that will make it a little more user friendly, but in all honesty they probably are only needed for advanced display features. If its just single videos in posts or pages, its simpler to do it manually.
Once you have copied the iframe code, as in step 4 in the above guide, you need to insert this into your site. But as this is code, you will need to disable the Content Editor, which most people user on Joomla or WordPress. See below for how to do this:
Enter Source Edit mode in WordPressIn WordPress, you simply need to click to the TEXT tab, as shown below, which will switch to source edit mode. To switch back, just click back on the Visual tab :
Enter Source Edit mode in JoomlaIn Joomla, it will depend on which editor you are using, but normally you will be looking for the button that has two arrows, like this <> and also highlighted in the image below. You can also use the Toggler Editor option, as shown by the red arrow.
Once you have entered the source editor, find the location you want to add the video to. You may need to flick through the code a little and it may seem a little daunting, but you will generally be able to find the place you want with a little searching. It can be handy to check what the text is directly above where the video needs to go. You can then locate that amongst the source code.
TIP - If its a large page of code, you may wish to type a unique bit of text, such as "aaaa111" into the place you wish to add the video, before you enter source edit mode. You can then use your web browser search function to find that text and place your iframe code. Just remember to remove the unique text one you have added the code.
Once you have found it, past the iframe code. NOTE - be careful not to place inside any other code snippets or overwrite any code.
You can then save or publish the page and go back to the normal edit mode.