Our monthly Virtual Happy Hour is happening this week, Fri Feb 23!

Try our conversational search powered by Generative AI!

Embed media

Vote:
 

Hello,

I am trying to use the default option in the editor to embed video from Youtube in my site. The issue is that I am not being able to view the video in full screen mode.

Is it not allowed or something?

#189417
Mar 19, 2018 9:58
Vote:
 

The 'Insert/edit embedded media' option in Episerver's editor is actually a TinyMCE plugin. 

Whenever you embed a video, it's rendered as an iframe. TinyMCE has an annoying habit of stripping away certain iframe attributes, like 'allowfullscreen', even when you copy-paste the embed snippet directly from YouTube.

To fix this, you have to tinker with TinyMCE's config, to allow the embed attributes you want. 

There's a tutorial on exactly this (with an iframe example) in Jon's blog: http://www.jondjones.com/learn-episerver-cms/episerver-developers-guide/episerver-and-tinymce/how-to-prevent-tinymce-the-richtext-editor-stripping-attributes-off-your-html-elements-in-episerver 

#189421
Edited, Mar 19, 2018 11:11
Vote:
 

But is there an option that I can set on iframes that they by default allow full screens?

#189448
Mar 19, 2018 20:06
Vote:
 

Yes, the attribute is 'allowfullscreen', but with the out-of-the-box configuration, TinyMCE strips it away from the embed code.

That's why you have to manually add this line in the TinyMCe config, as per Jon's blog post:

EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[*]' }")
This config change will affect all embedded videos on your site.

#189458
Edited, Mar 20, 2018 0:59
Vote:
 

Thanks for the response, but the issue is that I have to go in the source of the media and add that attribute to the iframe. I just want it set by default so my editors don't have to worry about it. 

#189470
Mar 20, 2018 8:29
Vote:
 

OK, I see now. Haven't tested this myself, but you might be able to solve that by modifying the media_url_resolver configuration in tinymce.init, as demonstrated here:

https://www.tinymce.com/docs/plugins/media/#media_url_resolver

As you can see, it modifies the default embed HTML that the TinyMCE Media plugin outputs. You might be able to put in "allowfullscreen" there.

tinymce.init({
  selector: "textarea.tinymce",
  plugins: "media",
  toolbar: "media",
  media_url_resolver: function (data, resolve/*, reject*/) {
    if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
      var embedHtml = '<iframe src="' + data.url +
      '" width="400" height="400" allowfullscreen></iframe>';
      resolve({html: embedHtml});
    } else {
      resolve({html: ''});
    }
  }
});
#189472
Edited, Mar 20, 2018 9:06
Vote:
 

Thanks a lot. :) But I am not being able to find out where to put this code.

#189577
Mar 20, 2018 19:59
Vote:
 

Hey there Arild Henrichsen, I am still struck in this issue. Could you help me understand where to put the JS code you showed above?

#192559
May 18, 2018 13:52
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.