Embedding and Sharing External Videos, Images and Content

While this may seem to be a somewhat technical challenge at first, the rewards when you master these techniques are well worth the learning curve and will soon become second nature!

Not all web content can be embedded. Only certain providers configure their web content for sharing. And when they do you may promote that content by embedding it into posts, and articles aka topics such a blogs, discussions, and reviews, as well as in event postings where applicable. This is a great way to add interest and support the message you are creating.

The most common material shared are videos which come primarily from Vimeo, Youtube, Dailymotion, and Ted (Talks) Metacafe', many podcasts. Otherwise you can share Posts from Facebook, Twitter and other other participating Social Media outlets via the embed buttons and a "Card" will will render usually with an image and often a description of the post from that external source.

Additionally, you may embed the cards from Facebook *, Twitter etc. into the Home Page Activity Stream or in the activity streams in the Groups (Departments) in which you are a member, and your own Profile's Stream simply by simply pasting in the URL from the top of that web page. This is similar to how it is done on most other Social Media websites simply by pasting in the URL of the source page. Many videos too, may also be embedded this way. See below.

Here are the steps for embedding videos into Topics and Events using the WYSIWYG Editor:

1. Plan ahead. Know where on the page you are creating/editing you wish to place the video.
2. Have the URL of the video ready to copy and paste from it's source.
3. Click your cursor in the place you wish to locate the video then find the "Styles" drop-down above the content and select the "Shadow Box" for the video provider (there are two; Facebook is second, YouTube, Vimeo and others are first).
4. * Under "Styles" click on the "Embed Video" shadow box which should then appear in your editing screen.
   1. Click anywhere in that box.
5. Click on one of the embed buttons located next to the Insert Image button. Either will do but for media files we recommend the "Media" button.
6. Depending on the provider, the video will or will not appear in the edit view until you save.
7. Next we save the topic or event.
8. In order to Preview before it is made available on the website, or check your progress, do not "publish" the content until you feel it is ready for others to view.
   1. To preview before you publish, first "Uncheck" the Publish checkbox at the bottom (under "Settings") of the page and then save. Note: this way, you may preview first to see how things are looking. Just remember to return to the editing function which is on the top of the page.
9. Once everything looks the way you like it, you may Check ✅ the Publish checkbox and Save.

^{* optional video display format with border, rounded corners and a drop shadow.}

Here is a video demonstrating how a Vimeo Video is embedded and styled with a nicely displayed "Embed Video" shadow box.

Notes: The "Preview" feature used in this video is no longer available, instead use the "Unpublish" described above in #8.

Use the icon on the bottom right to make it full screen, then Esc to return here.
For Vimeo the Fullscreen button looks like this:
YouTube and others are similar!

Technical note: This technique of using the Video Embed style applies to all current videos except where the video's format (ratio) differs from standard high definition (16 by 9). It is possible to conform your videos format by changing the class of the video using the "Source" code button in the editor, and then locating and modifying the format from: <div class="embed-responsive embed-responsive-16by9">...</div> to <div class="embed-responsive embed-responsive-21by9">...</div>, or <div class="embed-responsive embed-responsive-1by1">...</div> for example. Experimentation may be required!

Embedding into Activity Streams

To embed into Activity Streams from Facebook * or Twitter and many other sources the technique is simply to paste the "Clean" URL directly into your post. A Clean URL is generally all of the text up until a (&) ampersand and all that follows which are usually an obvious trail of nonsensical letters and numbers which are for tracking. Generally you may obtain the clean URL by opening the Sharing and or Embed Dialogue links and selecting "Copy URL"

Here are the steps to embed a Twitter Post in an Activity Stream.
Use the button on the bottom right to make if full screen, then Esc to return here.

This technique applies to comments and replies as well.

Videos, however will not generally be styled with the shadow box as seen in the Topics and Events pages when entered into comments and replies.

Embedding is supported by the following providers out of the box:

Any website supporting the protocol including, but not limited to, the following:

* Facebook current method of embedding posts (Where available)

Instructions:

Please note that Facebook has developed a means of sharing their proprietary content that differs from other platforms!

Primary method:

1. Locate Facebook content with "Public" visibility you wish to embed at Crew List.
2. Open the Post, Image, or video by clicking on it so that a URL such as this (Video)
   
   or this (Image)
   
   appears in the top of the page in the web address URL area of your browser.
3. Copy that URL (not to include anthing including and after a question mark ie: ?xyz123 if there is anything) and paste it directly into a Post where appropriate within any text you have entered.

Note: This method may also apply when creating a Topic or Event using the W.Y.S.I.W.Y.G. editor by entering the URL via the "Embed" button(s).

Alternate method:

1. Locate the post menu (Three small dots), click and select "Embed".
   ^{Note: if you cannot locate the dots, occasionally the Embed link can be found below the post.}
2. Select or de-select "Include full post" option and then "Copy Code".
   ^{This temporarily saves the IFrame code in your clipboard.}
3. Switch to the Crew List Post, Reply, Topic, or Event you have previously prepared to receive the <iframe...> code you copied on the Facebook page.
4. In a Post or Reply: Paste the code using 'CNTL V' (PC) or 'Command-V' (Apple) to Paste the contents of the Clipboard into the box in the location you have selected (above, below or inbetween) your text.
5. In a Topic (Blog, discussion, etc.) or Event: You may "mark" your in WYSIWYG Editor where you want the Facebook post to appear with some characters you will recognize (Such as "Paste here" or "XXXXX".
   • Then, locate the Source button on top of the editor's interface and find the marker amongst the HTML Code.
   • Highlight the marker and replace it by PASTING the code using 'CNTL V' (PC) or 'Command-V' (Apple) to inject the contents of the Clipboard into the box in the location you have selected (above, below or in between) your text.
6. Click on the Source button again and scroll if necessary to locate the post.
   ^{Note: It may take a few seconds for the post to render from Facebook!}
   • If the content you are embedding is a Facebook Video, you might consider using the "Styles" Dropdown in the interface to locate the Green Video Embed Styler and placing your "Marker" within that in order to format the video like the ones on this page, and then following the steps in #6 above from there as well as was described similarily above for YouTube, Vimeo and the other video providers above!

Watch instructional video: