Embedding videos on your store's pages
Summer Cart gives you the ability to embed videos from a video sharing web site to any rich text page in your store (including the product pages). You can do that practically everywhere in your store where WYSIWYG editor is enabled - product pages, rich text pages, xhtml box etc.
This is how the WYSIWYG editor options looks like:
In this tutorial you will learn how to embed a video from youtube and metacafe.com. You can use the same methodology with almost every other popular video sharing web site, as it is similar everywhere.
First of all you have to find or upload a video that serves your goals.
- Open the video page in your browser. There is a share button below every youtube video. Youtube are constantly updating the design and arrangement of their pages, so it might look different by the time you read this article, but there is always going to be a share button there. Click the Share button. It will provide different ways to share the video. Right now you are interested in the Embed option
- Click Embed
- Copy the html code from the box which appears. You need to put this code in your product's description.
The code is already selected and it is ready to be copied.
However, there are a few options below that you might take a look at and possibly use:
Share - Embed - Video Size: from this drop down menu you can choose size of the video that is going to be displayed on your web site. If you would like to use a custom size, simply change the width and height values in the code above, manually
Here is an example case which would require doing this:
In this case the width of the video exceeds the width of the html element it is located in and a horizontal scroll bar appears. We fixed this by changing the value of the width in the code.
Lets review the rest of the options underneath Share
Share - Embed - Use HTTPS:
Enable this option if your store uses HTTPS
Share - Embed - Enable Privacy-enhanced mode:
Enable this option if you do not wish for youtube to store information about your web site's visitors, that haven't clicked on the video.
Share - Embed - Use old embed code:
This option alternates the code, making it compatible with older web sites. This does not concern you, when using Summer Cart
- Open your store's administration panel and then go to Store -> Products
- Open the product. Edit the Detailed description. You need to switch the WYSIWYG editor to "Source" mode.
- Paste the code from youtube and click on save button.
- To check that everything is working you can open the product in the clients area. Product's description should looks something like that:
- Embedding from Metacafe.com
all other steps are the same as above.