Wild Apricot allows you to embed video clips from sites like YouTube, Facebook, Vimeo, Veoh, or Flickr on your Wild Apricot pages. You can also embed videos stored on your Wild Apricot site.
You should not embed videos into email messages because most email readers do not support them. Instead, we suggest inserting a thumbnail image of the video that links to the video. For a professional look, you can overlay a play button on your video thumbnail.
Embedding clips from video sites
Instructions for third-party services like these are provided as a courtesy and may contain out of date information or screen clips. For the latest instructions, consult the third party's website.
YouTube
To embed videos stored on YouTube, follow these steps:
- Go to YouTube.
- Find the video you want to embed and click on it. YouTube will start loading the video.
- Right click over the video and select the Copy embed code option.
- In your Wild Apricot account, go to the Website module and click the Sites pages option.
- Begin editing the site page or page template where you want to add the video.
- Click the Gadgets icon to display the list of available gadgets.
-
Drag the custom HTML gadget from the Gadget list, and drop it on the desired
location.
When a layout cell or placeholder is empty, a Drop gadget or grid here prompt will be displayed. When you drag a gadget over an empty layout cell or placeholder, it turns green, indicating that you can drop the gadget there. When you drag a gadget above or below a layout, a prompt will appear indicating that you can drop the gadget before or after the layout. - After you have inserted the gadget, hover over it and click the Settings icon.
-
Within the gadget settings on the left, click the
Edit code button.
- In the dialog that appears, paste the embed code for the video.
- Click the Save button to exit the dialog.
- Click the Save button to save your changes to the page.
The video should now appear on your site page. Switch to public view if the video does not immediately appear.
The video does not appear in public view, check the following:
- Make sure that your browser has the Flash plugin is installed
- Check your internet connection and speed
For more detailed instructions on how to place the YouTube video link, go to http://youtube.com/sharing.
If you encounter a problem with YouTube videos covering up fly-out menu options, add?wmode=opaque
to the end of the URL in the embed code.
To be displayed, a Facebook video must be open to the public with no age or geographical restrictions.
To embed videos from Facebook, follow these steps:
-
Locate the Facebook video you want to embed then right click over it and
copy the URL.
-
Go to Facebook's
Code Configurator page
and paste the URL in the URL of video field.
-
Scroll down to the Full Code Example section and copy the
code between the <body> and </body> tags.
- Begin editing the Wild Apricot page where you want the video to appear and add a Custom HTML gadget to the page.
-
Within the settings for the Custom HTML gadget, paste the Facebook embed
code you just copied.
- Save the changes to the code then save the changes to the page.
The Facebook video should now appear on your Wild Apricot page.
Other services
There are many other similar services, including:
For instructions on obtaining the embed codes for videos from these services, see their websites.
Embedding clips stored on your Wild Apricot site
You can embed videos – webinars, for example – stored on your Wild Apricot site. You can embed MP4, MOV, and AVI files, but not WMV files.
Visitors to your site may need to download and install browser-specific plugins to view your videos.
Uploading the video file
The first step in embedding video on your site is to upload your video file to your Wild Apricot account.
Uploaded video files will count against your file upload limit. You can also link to video files stored on another site – you just need to know the URL of the file.
To upload your video file, go to the Files screen by clicking the Files option within the Website module. You should create a separate Videos folder to organize your files.
After you've uploaded your video file, you need to know its location or URL. Right click over the video file in the Videos folder and select Properties from the menu that appears.
Within the Properties window, select the entire file location then right click and select the Copy option.
The URL of the uploaded video file has now been copied to the clipboard. You should now paste it to a temporary location such as Notepad since we're going to be copying some other code as well.
Adding the code to embed the video
Now that you've uploaded your video file and copied its location, you add HTML code to embed the video – that is, display a player and play the file.
The code shown below works in all modern browsers (Internet Explorer 9 and above).
To add the code to embed the video, follow these steps:
-
Copy and paste the following code to the clipboard.
<video controls="" height="360" preload="" src="video_file_URL" width="640">
Your browser does not support the video tag.
</video>
- In your Wild Apricot account, go to the Website module and click the Sites pages option.
- Begin editing the site page or page template where you want to add the video.
- Click the Gadgets icon to display the list of available gadgets.
-
Drag the custom HTML gadget from the Gadget list, and drop it on the desired
location.
When a layout cell or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a gadget over an empty layout cell or placeholder, it turns green, indicating that you can drop the gadget there. When you drag a gadget above or below a layout, a prompt will appear indicating that you can drop the gadget before or after the layout. -
After you have inserted the gadget, click the
Edit code button within the page settings on the left.
- In the dialog that appears, paste the embed code for the video.
- Within the pasted code, replace video_file_URL with the URL of your video file (which you copied earlier).
-
To have the video played automatically, include the
autoplay attribute, for example:
<video autoplay="" controls="" height="360" preload="" src="/resources/Videos/Typography 101 webinar.mp4" width="640">
Your browser does not support the video tag.
</video>
- For a list of other attributes you can include, click here.
- Click the Save button to save your code changes.
- Click the Save button to save your changes to the page.