[Solution] No audio/video in NUI

FiveM Resource Development & Modding Discussion
1

Hey there,

Since the last update I noticed that people have problems with audio/video’s in UI’s. I had the same problem in my Loadscreen and this is what I did to solve this.

I always had a background music in my loadingscreen but it didn’t work anymore so what I did is as next. Normally you download music from YouTube or so and add it as

First of all add the YouTube iFrame API script in your head:

<script async src="https://www.youtube.com/iframe_api"></script>

After that the div element below on top of your body:

<div id="div_YouTube" style="display: none;"></div>

I’m using the ‘display:none’ style because I don’t want that players see the video. If you want to show your video, just remove that. You need to add some other styles to fit it.

Now we will add a script which loads the video. Add this on the bottom of your body.

<script>
        function onYouTubeIframeAPIReady() {
            var player;

            player = new YT.Player('div_YouTube', {
                videoId: 'Nla5XQGjgOI',     // ID from video (https://www.youtube.com/watch?v=VIDEO_ID_HERE)
                width: 560,
                height: 316,
                playerVars: {
                    'autoplay': 1, // Start automaticly
                    'controls': 0, // No controls (pause button etc.)
                    'loop': 1, // Restart after end
                },
                events: {
                    'onReady': function (e) {
                        e.target.setVolume(10);      // Volume of video (max 100)
                    }
                }
            });
        }
    </script>

If you did everything right it should work know. Goodluck :slight_smile:

2 Likes
2

hi and thanks for Solution, but is there a way to just make a local video as background please?
thanks

4

Try to use a iframe

5

do you mean i should create my own loadscreen and then use iframe to show that webpage?

6

i tried to but still no background and no music, also small

20200708171649_1
20200708171649_1832×624 12.3 KB

my code

<!DOCTYPE html>
<html>

<body>


<iframe src="loading.html" >



</body>
</html>
7

Use as src your video (mp4 or so). And you need to style it with css

8

i try that but not working, can you please send me an example for s simple web page with a video and music only?
thanks

9

Don’t have time for that, sorry :wink:

You can follow this: https://www.w3schools.com/tags/tag_iframe.asp

You just need to do something like this:

<iframe src="movie.mp4" height="100%" width="auto" />

Or just upload it on YouTube if it doesn’t work