Youtube embed Fullscreen not available

How-to Discussions
1

Hey!
I have implemented the video like this:

<DockPanel>
    <NativeViewHost>
            <WebView  Height="300"  Dock="Fill" ZoomEnabled="false" ux:Name="VideoWebView" Url="https://www.youtube.com/embed/rn_YodiJO6k?fs=1" /> 
    </NativeViewHost>
</DockPanel>

But I do not get the fullscreen button. Does anyone have the same problem or a solution for this? :confused:
thanks!!

2

Hello! How about using the Youtube API to get the direct video URL to stream through Video Class? https://fuseopen.com/docs/fuse/controls/video.html

3

Thanks for your answer, but this doesn´t work for youtube url:
https://www.youtube.com/watch?v=rn_YodiJO6k
And there seems to be no way to get the absolute url to the video :confused:

4

Hey @Stefan_13, did you try using the url property in video? https://fuseopen.com/docs/fuse/controls/video/url.html

5

Sorry for the late reply, but this doesn´t work for my also :confused:

6

Hey @Stefan_13, lol, I figured out why the YouTube URL is not working, its because you are using the URL of the web page and not the URL of the video.

To get the actual videos URL from YouTube, you would need to use their API:

Here’s my working example of Fuse playing a video URL of a YouTube video in fullscreen (you could always hide the controls with UX):

<App>
	<DockPanel>
    <Video ux:Name="video" Dock="Fill" Url="https://r5---sn-po4vapo3-j3ae.googlevideo.com/videoplayback?expire=1540388986&amp;ipbits=0&amp;dur=315.118&amp;lmt=1539086782961133&amp;ratebypass=yes&amp;mime=video%2Fmp4&amp;key=yt6&amp;nh=%2CIgpwcjAyLnN2bzA1KgkxMjcuMC4wLjE&amp;initcwndbps=1340000&amp;requiressl=yes&amp;c=WEB&amp;id=o-AHPhBDkR5WbYI2d1IAigGougXJa-id_-o-Yvznk6hRQy&amp;mm=31%2C29&amp;mn=sn-po4vapo3-j3ae%2Csn-n8v7kne7&amp;ms=au%2Crdu&amp;mt=1540367272&amp;mv=m&amp;sparams=dur%2Cei%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cnh%2Cpl%2Cratebypass%2Crequiressl%2Csource%2Cexpire&amp;ip=46.160.237.93&amp;ei=GiTQW_beN8rg7QS4gaWoCw&amp;itag=22&amp;pl=21&amp;fvip=6&amp;source=youtube&amp;txp=5531432&amp;signature=D61396EFC5FB1B5AB74D9659CD4AB19F416C1645.0DB8D5ED2E524764C81385EE81AF5B5B4DDFCEDC&amp;video_id=AuCv9DV2Nbc&amp;title=Los+Angeles%2C+with+umbrella" IsLooping="true" StretchMode="UniformToFill">
        <ProgressAnimation>
            <Change progressBar.Width="100" />
        </ProgressAnimation>
    </Video>
    <Rectangle ux:Name="progressBar" Dock="Bottom" Fill="#f00" Width="0%" Height="10" />
    <Grid Dock="Bottom" ColumnCount="2" RowCount="1">
        <Button Text="Play">
            <Clicked>
                <Resume Target="video" />
            </Clicked>
        </Button>
        <Button Text="Pause">
            <Clicked>
                <Pause Target="video" />
            </Clicked>
        </Button>
    </Grid>
</DockPanel>
</App>

P.S. I think you should rename this post, as its totally possible to view a YouTube video in fullscreen on Fuse :tada:

7

Thank you for your reply!!
But I think I am stupido^^ :smiley:

I figured out why the YouTube URL is not working, its because you are using the URL of the web page and not the URL of the video.

I do not find any solution, to get the real path of a youtube video. I think I need somethink like “…video.mp4”? I only have solutions to get the ID of a video :confused:

Here’s my working example of Fuse playing a video URL of a YouTube video in fullscreen (you could always hide the controls with UX):

I have copied your cody 1:1 but I do not get any video displayed :confused:
And what is this url? is it from youtube api?

https://r5---sn-po4vapo3-j3ae.googlevideo.com

Sorry if I missunderstand and that I am not that great :smiley:

8

Yeah, I don’t think you’ll be able to get the actual video url from the API, just the videos details; I tested an API call: https://developers.google.com/youtube/v3/docs/videos/list

You probably didn’t see the video because the url expires, I got it from the page.

I think the process YouTube wants us to follow, is to use the API for the video details, then pass it through to their iOS and Android players to play the video: https://developers.google.com/youtube/documentation

So you’ll have to do some native fuse integration with their players, which I think is already started here: https://github.com/bolav/fuse-youtube