Skip to main content

Embedding Viostream Videos in TinyMCE

TinyMCE is a popular rich text editor that's widely used in content management systems and web applications. When embedding Viostream videos in TinyMCE, you'll need to configure the editor to allow iframe content from Viostream's domain.

Quick Setup​

To enable Viostream video embeds in TinyMCE, you need to add Viostream to the sandbox_iframes_exclusions parameter when initialising the editor:

tinymce.init({
  selector: "textarea",
  sandbox_iframes: true,
  sandbox_iframes_exclusions: [
    'play.viostream.com',
  ],
});

Why This Configuration is Necessary​

TinyMCE's sandbox_iframes feature provides security by restricting iframe content by default. This prevents potentially malicious content from running within your editor. However, it also blocks legitimate video embeds from trusted sources like Viostream.

By adding play.viostream.com to the exclusions list, you're telling TinyMCE that iframe content from this domain is safe to display and interact with.

Complete Configuration Example​

Here's a more comprehensive TinyMCE configuration that includes Viostream support along with other common settings:

tinymce.init({
  selector: '#my-editor',
  plugins: 'media code preview fullscreen',
  toolbar: 'undo redo | formatselect | bold italic | media | code preview',

  // Enable iframe sandboxing for security
  sandbox_iframes: true,

  // Allow Viostream embeds
  sandbox_iframes_exclusions: [
    'play.viostream.com',
    // Add other trusted domains as needed
    'dailymotion.com',
    'embed.music.apple.com',
    'open.spotify.com',
    'giphy.com',
    'dai.ly',
    'codepen.io',
  ],

  // Media plugin settings
  media_live_embeds: true,
  media_alt_source: false,
  media_poster: false,

  // Content filtering
  extended_valid_elements: 'iframe[src|width|height|name|align|class|allowfullscreen|frameborder]',
});

Embedding Your Viostream Video​

Once TinyMCE is configured correctly, you can embed Viostream videos in several ways:

Method 1: Using the Media Plugin​

  1. Click the Media button in the TinyMCE toolbar
  2. Select the Embed tab
  3. Paste your Viostream embed code
  4. Click Save

Method 2: Direct HTML Insertion​

  1. Click the Source Code button (available if the "Code" plugin is enabled in TinyMCE)
    • If the "Source Code" button is not visible, ensure the "Code" plugin is included in your TinyMCE configuration.
  2. Paste your Viostream iframe embed code directly
  3. Click Save or switch back to visual mode

Method 3: Paste Embed Code​

With the proper configuration, you can often simply paste the Viostream embed code directly into the editor, and TinyMCE will recognise and preserve it.

Example Viostream Embed Code​

Your Viostream embed code will look something like this:

<iframe
  src="https://play.viostream.com/embed/abc123xyz"
  width="640"
  height="360"
  referrerPolicy='strict-origin-when-cross-origin'
  frameborder="0"
  allowfullscreen>
</iframe>

Troubleshooting Common Issues​

Video Not Displaying​

If your Viostream video isn't displaying properly:

  1. Check the exclusions list: Ensure play.viostream.com is included in sandbox_iframes_exclusions
  2. Verify the embed code: Make sure you're using the correct iframe code from Viostream
  3. Check browser console: Look for any security or loading errors

Content Being Stripped​

If TinyMCE is removing your embed code:

  1. Update valid elements: Add iframe to your extended_valid_elements configuration
  2. Check content filtering: Ensure your TinyMCE setup isn't too restrictive
  3. Verify plugins: Make sure the media plugin is enabled and configured properly

Responsive Embeds​

To make your Viostream embeds responsive, wrap them in a responsive container:

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
  <iframe
    src="https://play.viostream.com/embed/abc123xyz"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Security Considerations​

When configuring iframe exclusions, only add domains you trust completely. Viostream (play.viostream.com) is safe to include as it's a legitimate video hosting platform with proper security measures.

Always keep your exclusions list as minimal as possible to maintain security whilst enabling the functionality you need.

Additional Resources​