Youtube full screen

8 posts, 1 answers
  1. Chris
    Chris avatar
    9 posts
    Member since:
    Sep 2012

    Posted 11 Nov 2015 Link to this post

    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

  2. Chris
    Chris avatar
    9 posts
    Member since:
    Sep 2012

    Posted 11 Nov 2015 Link to this post

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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 16 Nov 2015 Link to this post

    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
  5. Chris
    Chris avatar
    9 posts
    Member since:
    Sep 2012

    Posted 20 Nov 2015 in reply to Vessy Link to this post

    Thanks for your assistance
  6. Chris
    Chris avatar
    9 posts
    Member since:
    Sep 2012

    Posted 20 Nov 2015 in reply to Vessy Link to this post

     Just a FYI in chrome this does not work:

     

    iframe.allowFullScreen = true;

     Although this does:

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

  7. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 23 Nov 2015 Link to this post

    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
  8. Chris
    Chris avatar
    9 posts
    Member since:
    Sep 2012

    Posted 23 Nov 2015 Link to this post

    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.

  9. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 24 Nov 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017