Youtube video for background

Front End Components
#1

Hi, could u pls tell me how can i use a youtube video as a responsive background instead of a video file from my server? Thnks in advance.

Adding Background Videos
#2

Hello,
Unfortunately YouTube videos are not currently supported.

#3

Max, would you be able to download the youtube video into MP4 and then convert it into a supported format?

#4

Yes, if you can download the video to an .mp4 it should be suitable for use as a background video

#5

Sure you can, but i really wold like to use a youtube video since my hosting its no so good or fast as Youtube.

#6

Have you tried any of the solutions available in a Google search? I don’t believe there is a Wappler way to do it.

https://www.google.com/search?q=using+youtube+video+as+background&rlz=1C5CHFA_enCA734CA735&oq=Using+Youtube+video+a&aqs=chrome.1.69i57j0l5.15694j0j7&sourceid=chrome&ie=UTF-8

1 Like
#7

@Max_Saravia
Hey Max did you solve this? I have a Wappler built site with background YT video.

#8

Hi, Howard, no i didnt, could u pls tell me how did u do it? thnks!

#9

Hey Max, This was my first Wappler project.

https://thetanner.show

**HTML** 
<script async="" src="https://www.youtube.com/iframe_api"></script>
    <script src="/js/index.js"></script>
    <div class="video-background">
        <div id="video-foreground" class="mute"></div>
    </div>


**JS**
       var player; 

    function onYouTubeIframeAPIReady() {
      player = new YT.Player('video-foreground', {
        videoId: 'your video id here', // YouTube Video ID
        playerVars: {
          autoplay: 1,        // Auto-play the video on load
          controls: 0,        // Show pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 1,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          cc_load_policy: 0, // Hide closed captions
          iv_load_policy: 3,  // Hide the Video Annotations
          autohide: 0,         // Hide video controls when playing
          playlist: 'YOURPLAYLIST'
        },
        events: {
          onReady: function(e) {
            e.target.mute();
          }
        }
      });
    }


    $(document).ready(function(e) {   
      $('.sound').on('click', function(){
        $('#video-foreground').toggleClass('mute');
        $('.volume-icon').toggleClass('fa-volume-up', 'fa-volume-off');
        if($('#video-foreground').hasClass('mute')){
          player.mute();
        } else {
          player.unMute();
        }
      });
});
#10

Maybe you can have a look on this library…its working very well … maybe could be include here