You are here: Home / Documentation / How To's / How to embed video on a page

How to embed video on a page

by ledwell published Dec 16, 2014 05:20 PM, last modified Jul 07, 2017 09:45 AM
This is a work around for TinyMCE stripping out embed code. It uses the "Snippets" product created by Sam Schwartz.

The problem

When you try and use TinyMCE and embed video code from Kaltura (or any video service) TinyMCE will strip out and rework the code such that the video will not display in Plone 4.3. When you go into "site setup > HTML Filtering" and adjust those setting TinyMCE continues to strip out the code. You can turn off TinyMCE and edit the code without the WYSIWYG editor then the code will not be modified on save and the video will display as expected. The problem with this solution is that someone else might come along who just wants to fix or change some text. If they were to use TinyMCE on that page with the functioning video then the code would be reworked on a save and the video which worked before would stop doing so.

You could try using;

David's option looks like it would work but you'd have to have more knowledge of monkeypatching and rights to access the file server, neither of which I have. 

For this to work you will need to have

  • Plone 4.3 (this was the version I tested with it may work in other versions)
  • Snippets product installed (uwosh.snippets by Sam Schwartz)
  • UPDATE: This solution works for an older version of the "Snippets" product. This solution is for version 0.9.27. Thankyou @dbitouze !

Directions

Create a Snippet

  1. Activate "Snippets" (activating this product will create a folder called ".snippets" on the root level of your site)
  2. Copy the embed code for the video you want to display
  3. Navigate to the root of your site and go into the /.snippets folder
  4. Choose "add new > page"
  5. Change "Text Format" to "textile" (this is mandatory! we do NOT want to use TinyMCE in anyway here).
  6. Paste your embed code
  7. IMPORTANT!. please title your file very simply. Do NOT use any goofy characters or spaces. The format should be, a-zA-Z0-9_ (if you name it incorrectly youll get an error when you try and insert the snippet. If that happens just go back and rename the snippet.)
  8. Save

Add your snippet to a page using TinyMCE

  1. Navigate to a page where you want your video (now a snippet) to appear
  2. Choose the "insert snippets icon" looks like this  {{}}
  3. Choose the "browse" button
  4. Choose your new Snippet 
  5. Choose the "Select" button
  6. If your happy with the preview choose the "insert" button

Positives Side Effects

This is a snippet that can be inserted in multiple places on your website. If you ever go to change the video for the snippet then all pages using that snippet get the new video as well.

 
 
 
Navigation