locked
How to implement YouTube video iframe...

    Question

  • Hello there,

    Maybe this topic is like others in this forum, but... i will give you my point, answer and question...

    Well... example:

    1. In our empty application project lets put in default.html:

    <iframe width="500" height="412" src="https://www.youtube.com/embed/tDBSa5TMX2Y?html5=1" frameborder="0" allowfullscreen></iframe>

    2. In package.appmanifest lets add in Content URIs this lines:

    https://*.youtube.com

    (https://*.soundcloud.com  - if you use soundcloud iframe)

    welll. If you make this- try- you will find that youtube video was loaded in html5 (or soundcloud).

    The problem is only in youtube video- when i click play- nothings happened. Is there something else? Why cant play Youtube video? If i try with soundcloud- everything is ok and works perfect.

    Can you give me some ideas how to youtube play?

    (sorry for my english)



    • Edited by Boris Delev Thursday, March 13, 2014 6:16 PM
    Thursday, March 13, 2014 4:29 PM

Answers

  • Hi Boris,

    It works fine for me. With your link I have to input some validation chars and then everything should be ok later.

    My code is really simply I did not change anything for the initial project.

    <body>
        <p>Content goes here</p>
        <x-ms-webview src="https://www.youtube.com/embed/tDBSa5TMX2Y?html5=1"></x-ms-webview>
    </body>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, March 18, 2014 6:23 AM
    Moderator
  • Lets give a summary - what you will do to put youtube clip in your app (windows 8.1):

    First way is with webview controller- just put in code:

    <x-ms-webview src="https://www.youtube.com/embed/tDBSa5TMX2Y?html5=1"></x-ms-webview>
    


    Second way is with iframe... when content come from ajax or some api. To do this, your youtube embed code must contain param html5=1. Steps are:

    1. In package app manifest (package.appxmanifest) you must add Content URIs like : https://*.youtube.com and include it. If you use SoundCloud iframe- add another line with https://*.soundcloud.com

    2. Just add line with iframe :

    <iframe width="500" height="412" src="https://www.youtube.com/embed/tDBSa5TMX2Y?html5=1" frameborder="0" allowfullscreen></iframe>

    And thats it. If content comes from ajax (API)- you must "escape" it ... something like this:

    MSApp.execUnsafeLocalFunction(function () {
    element.html('<iframe src="youtube"... etc');
    });

    That it is.

    I have some issue with my old apps - youtube iframe and elements comes but after click play - nothings happened. In this case- just create new blank app and try it. Video will play :)

    Sorry for my english and good luck!

    • Marked as answer by Boris Delev Tuesday, March 18, 2014 11:52 AM
    Tuesday, March 18, 2014 11:52 AM

All replies

  • Hi Boris,

    Before answering the question, I would like to know you are working for win8.1 app or win8.0 app.

    If you are working with win8.1 app, use x-ms-webview element might be better than iframe.

    If you are working with win8.0 app, why there is https but not http? http://social.msdn.microsoft.com/Forums/en-US/c496fa28-fa89-4248-87aa-a215b4d9f999/how-to-emded-youtube-video-in-htmljavascript-metrostyle-app

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, March 14, 2014 5:34 AM
    Moderator
  • I tried with webview element, but result is the same. And, yes- its 8.1 app... :/

    Friday, March 14, 2014 2:21 PM
  • Hi Boris,

    It works fine for me. With your link I have to input some validation chars and then everything should be ok later.

    My code is really simply I did not change anything for the initial project.

    <body>
        <p>Content goes here</p>
        <x-ms-webview src="https://www.youtube.com/embed/tDBSa5TMX2Y?html5=1"></x-ms-webview>
    </body>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, March 18, 2014 6:23 AM
    Moderator
  • Yes, i did same result... but when i click play button- didn't start. Can you try?

    Thank you!!!

    Tuesday, March 18, 2014 8:41 AM
  • Yes, i did same result... but when i click play button- didn't start. Can you try?

    Thank you!!!

    Hmm... i tryed in new empty project and yes- its worked. :( i will search the problem in my app.

    Thank you!

    Tuesday, March 18, 2014 8:43 AM
  • Lets give a summary - what you will do to put youtube clip in your app (windows 8.1):

    First way is with webview controller- just put in code:

    <x-ms-webview src="https://www.youtube.com/embed/tDBSa5TMX2Y?html5=1"></x-ms-webview>
    


    Second way is with iframe... when content come from ajax or some api. To do this, your youtube embed code must contain param html5=1. Steps are:

    1. In package app manifest (package.appxmanifest) you must add Content URIs like : https://*.youtube.com and include it. If you use SoundCloud iframe- add another line with https://*.soundcloud.com

    2. Just add line with iframe :

    <iframe width="500" height="412" src="https://www.youtube.com/embed/tDBSa5TMX2Y?html5=1" frameborder="0" allowfullscreen></iframe>

    And thats it. If content comes from ajax (API)- you must "escape" it ... something like this:

    MSApp.execUnsafeLocalFunction(function () {
    element.html('<iframe src="youtube"... etc');
    });

    That it is.

    I have some issue with my old apps - youtube iframe and elements comes but after click play - nothings happened. In this case- just create new blank app and try it. Video will play :)

    Sorry for my english and good luck!

    • Marked as answer by Boris Delev Tuesday, March 18, 2014 11:52 AM
    Tuesday, March 18, 2014 11:52 AM
  • This does not seem to work (anymore). The youtube JS code tries to create an ActiveX object over and over again until the app crashes with an Out Of Memory exception.
    Monday, April 13, 2015 12:10 AM