Embedding Videos, Forms, PayPal, 3rd Party Code

Embedding Videos, Forms, PayPal, 3rd Party Code

6:40 minute video available here (and embedded at the end of the document)

Embedding allows you to take a video or Paypal/Eventbrite code that lives on YouTube, Vimeo, or some other server and post it on a web page outside of that server. Embedding the video allows people to watch it or fill out the form while on your MyLO page rather than visiting another site like Paypal, Vimeo or YouTube.  

In order to embed elements from 3rd party sources, you need to be using a text format called "Full HTML." This is because the standard text format (which shows you the visual editor and allows you to format your content) restricts code that can be included for both security and accessibility purposes. 

Some of the reasons you may want to embed 3rd party code:

  • Present a YouTube or Vimeo video in your content
  • Include a Donate link or form on your site
  • Include a sign up form for a mailing list on your site
  • Include a Facebook or Twitter widget on your site

Steps to include 3rd party embed code:

1. Find the embed code (widget/video) that you want to use

This is going to be platform specific. Common examples of what you might need:

  • PayPal Donate Button (link takes you to the PayPal documentation) 
  • YouTube Video: Click on "Share" under the video, then find the "Embed" link. This will give you a code snippet to copy, which is what you will paste during the instructions below
  • MailChimp Subscribe Form (link takes you the MailChimp documentation)
  • Eventbright Signup Form (link takes you to the EventBright documentation)
  • Facebook Page Plugin use your League's Facebook Page URL to generate code for the timeline, messages, or events
  • Twitter Developers enter your League's Twitter URL to generate code for the timeline

2. Find the "Add 3rd Party Embed Code" button at the bottom of your body field

Just below your main body field, you'll find a section with two buttons labeled "Body with Embed Code."

Use the "Add 3rd Party Embed Code" button to open up a Full HTML text field, where you will paste your embed code. Do not change the text format on this field to anything else. It will render code, and that is exactly what you should see.

Use the "Add Additional Formatted Text" button if you want to place more nicely formatted text using teh visual editor below the embed code you just added. 

You can add as many of these embed code and formatted text items as you want.

Edit body field and 3rd party embed html code window - Google Drive

Here's an example of using the "Add 3rd Party Embed Code" button under the Body. The 3rd Party Embed Code (HTML) textbox was added (under 'Body with Embed Code' section), with the HTML embed for a Google Drive folder pasted in.

 

Or, if you want to be really adventurous: 

Switch your text area to "Full HTML"

On your site, edit the page where you want to add the embed code. Find the text area where you want to put the code, and change the input format from WYSIWYG to Full HTML (use with care).

visual demonstrating dropdown to select Full HTML for text format

 

Once you do this, your visual editor (the buttons at the top) will go away, and you will be seeing actual markup rather than visually formatted content. This is because the embed code you want to include needs to be added as straight markup. This will make it more difficult for you to make your page look nice unless you are familiar with HTML.

Pro tip: Wait to add your embed code until after the rest of your page is as you want it to be. Do all of the work on your page, including formatting your content, with the text format set to WYSIWYG. Once you are happy with the page, change your text format to Full HTML, and then paste your embed code into the correct spot. 

You can switch back to WYSIWYG to continue formatting, but you must reset it back to Full HTML before you save or you will lose your embed code. 

If you do lose your embed code after editing, simply return to the 3rd party source for the code again, set your input format to Full HTML, and paste it back in.

Make sure that the input format is set to "Full HTML (use with care)" at the moment that you Save your page.

To add embed code in the sidebar

Your sidebar is controlled on your League site home page. To manage this, go to your League's landing page, and select "New Draft" (or Edit Draft if you are already working on revisions). Scroll down to the Sidebar Content fieldset (which is collapsed) and click on the words "Sidebar content." In here, you have a text area that works just like any other text area on your site. You can change the text format to full HTML and include any 3rd party code you want here, or you can use the embed code button as you would in your content body.

MyLO FAQ Category: