Youtube full screen

[Chris]

Hi,

I currently use a splitter, within one of the panels I want to embed a youtube video and importantly allow the option for full screen:

 <iframe width="560" height="315" src="https://www.youtube.com/embed/sNIMCdVOHOM" frameborder="0" allowfullscreen></iframe>

However because the way the 'RadPane' is constructed in the background it uses an iframe without the "allowfullscreen" flag here is the code telerik generates:

 <telerik:RadPane ID="ContentPane" runat="server" ContentUrl="​MainPage.aspx">

Generates

<iframe name="ContentPane" id="RAD_SPLITTER_PANE_EXT_CONTENT_ContentPane" src="MainPage.aspx" frameborder="0" scrolling="auto" style="border: 0px; height: 191px; width: 824px;"></iframe>

 If there any way I can append "allowfullscreen" onto this iframe?

 

Thanks

[Chris]

I have found a workaround although its not brilliant, as I am forced to reload MainPage.aspx otherwise the browser doesn't allow full screen:

 Is there any way to either edit the "<iframe" tag HTML, I have tried adding attributes but it does not work.

window.onload = function () {
    document.getElementById('RAD_SPLITTER_PANE_EXT_CONTENT_ContentPane').setAttribute('allowFullScreen', 'allowFullScreen');
    document.getElementById('RAD_SPLITTER_PANE_EXT_CONTENT_ContentPane').src = 'MainPage.aspx';
}

[Vessy]

Hi Chris,

Indeed the Splitter does not provide a built-in option to configure the allowFullscreen functionality of its iframe, so you have to configure it explicitly. The only improvement I can suggest to your current approach is to use the Splitter's API when accessing and configuring the iframe element, e.g.:

window.onload = function () {
    var pane = $find("ContentPane");
    var iframe = pane.getExtContentElement();
    iframe.allowFullScreen = true;
    pane.set_contentUrl("MainPage.aspx");
}

Regards,
Vessy
Telerik

[Chris]

Thanks for your assistance

[Chris]

 Just a FYI in chrome this does not work:

 

iframe.allowFullScreen = true;

 Although this does:

iframe.setAttribute("allowfullscreen", "true");

[Vessy]

Hi Chris,

Thank you for your update. We will investigate this behavior further and see whether it can be fixed on our side.

Regards,
Vessy
Telerik

[Chris]

Hi Vessy,

I have got it to work thanks, I simply replaced 

iframe.allowFullScreen = true;

 to 

iframe.setAttribute("allowfullscreen", "true");

It would be great if in a future version we could edit the iframe but this workaround works fine.

[Vessy]

Hi Chris,

I really glad you found a solution which is applicable for your scenario. It would be highly appreciated if you submit your iframe-editing suggestion in our Feedback portal, so our developers will consider such improvement depending on the items popularity:
http://feedback.telerik.com/Project/108/

Regards,
Vessy
Telerik