London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

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.