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
But is there an option that I can set on iframes that they by default allow full screens?
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.
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.
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: ''}); } } });
Thanks a lot. :) But I am not being able to find out where to put this code.
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?
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?