This is a migrated thread and some comments may be shown as answers.

Youtube full screen

7 Answers 55 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 11 Nov 2015, 05:16 PM

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

7 Answers, 1 is accepted

Sort by
0
Chris
Top achievements
Rank 1
answered on 11 Nov 2015, 06:52 PM

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';
}

0
Accepted
Vessy
Telerik team
answered on 16 Nov 2015, 01:45 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Chris
Top achievements
Rank 1
answered on 21 Nov 2015, 03:05 AM
Thanks for your assistance
0
Chris
Top achievements
Rank 1
answered on 21 Nov 2015, 05:17 AM

 Just a FYI in chrome this does not work:

 

iframe.allowFullScreen = true;

 Although this does:

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

0
Vessy
Telerik team
answered on 23 Nov 2015, 02:51 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Chris
Top achievements
Rank 1
answered on 23 Nov 2015, 03:23 PM

Hi Vessy,

I have got it to work thanks, I simply replaced 

iframe.allowFullScreen = true;

 to 

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


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

0
Vessy
Telerik team
answered on 24 Nov 2015, 01:08 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Splitter
Asked by
Chris
Top achievements
Rank 1
Answers by
Chris
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or