locked
8.1: HTML5 YouTube iFrame Video Embed doesn't work.

    Question

  • I am using "https" and I have "https://*.youtube.com" in the content uri section of the appmanifest.

    However, the video just stays on the loading screen.

    Is there another uri I have to add or is my only option to use webview?

    Code example:

    <iframe width="100%"
                height="100%"
                src="https://www.youtube.com/embed/VIDEOID"
                frameborder="0"
                allowfullscreen></iframe> 

    My existing 8.0 app works fine with the above and the video is controlled using YouTube's JSAPI. 

    I can get the above running in the webview but I have no idea how I go about executing the YTs JSAPI controls through the webview window or whether this is even possible?


    • Edited by ViralBeeb Friday, October 18, 2013 5:24 PM .
    Friday, October 18, 2013 4:24 PM

Answers

  • Yes, it did. Here's how my HTML and package.appxmanifest look like:

    HTML:
    =====
    <body>
        <p>Content goes here</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/7BN0W7CONpw" frameborder="0" allowfullscreen></iframe>
    </body>
    
    Package.appxmanifest:
    =======================
      <Applications>
        <Application Id="App" StartPage="default.html">
          <VisualElements DisplayName="App3" Logo="images\logo.png" SmallLogo="images\smalllogo.png" Description="App3" ForegroundText="light" BackgroundColor="#464646">
            <DefaultTile ShowName="allLogos" />
            <SplashScreen Image="images\splashscreen.png" />
          </VisualElements>
          <ApplicationContentUriRules>
            <Rule Match="https://www.youtube.com/*/*" Type="include" />
          </ApplicationContentUriRules>
        </Application>
      </Applications>
      <Capabilities>
        <Capability Name="internetClient" />
      </Capabilities>


    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    Saturday, October 19, 2013 12:31 AM
    Moderator

All replies

  • Try putting this rule in the "Content URIs" section: https://www.youtube.com/*/*

    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    Friday, October 18, 2013 9:33 PM
    Moderator
  • Doesn't work here, did it work for you?
    Friday, October 18, 2013 10:17 PM
  • Yes, it did. Here's how my HTML and package.appxmanifest look like:

    HTML:
    =====
    <body>
        <p>Content goes here</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/7BN0W7CONpw" frameborder="0" allowfullscreen></iframe>
    </body>
    
    Package.appxmanifest:
    =======================
      <Applications>
        <Application Id="App" StartPage="default.html">
          <VisualElements DisplayName="App3" Logo="images\logo.png" SmallLogo="images\smalllogo.png" Description="App3" ForegroundText="light" BackgroundColor="#464646">
            <DefaultTile ShowName="allLogos" />
            <SplashScreen Image="images\splashscreen.png" />
          </VisualElements>
          <ApplicationContentUriRules>
            <Rule Match="https://www.youtube.com/*/*" Type="include" />
          </ApplicationContentUriRules>
        </Application>
      </Applications>
      <Capabilities>
        <Capability Name="internetClient" />
      </Capabilities>


    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    Saturday, October 19, 2013 12:31 AM
    Moderator
  • Very strange, I copy/pasted - still a no go here.

    What could it be? The 8 app in VS 2012 works fine.

    I even rebooted (using /cmd [lol]) - still the same.

    Tried it deployed and as debugging.

    In VS 2012 I get the HTTPS error: HTTPS security is compromised by http://r8---sn-cu-ciml.c.youtube.com/videoplayback?blah-blah

    Could this be related?

    • Edited by ViralBeeb Saturday, October 19, 2013 4:15 AM .
    Saturday, October 19, 2013 2:43 AM