Play videos (Youtube, Vimeo etc.) as fullscreen website background

<!-- Please note that this will only work for desktop browsers, but it is easy to replace the #fullscreen DIV via CSS on mobile devices. A simple media query should do. --> <div id='fullscreen' style='position: fixed; z-index: -99; width: 100%; height: 100%'> <iframe id='video' frameborder='0' height='100%' width='100%' src='about:blank'></iframe> </div> <script language='JavaScript'> <!-- // You can have here one or multiple videos. var textArray = [ 'https://youtube.com/embed/8mas8bqSoa0?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/yNttlers7fU?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/k9qWa0Yn6bo?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://player.vimeo.com/video/132602913?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/124858722?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/90160649?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/103223164?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/39784233?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/30830412?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/23281150?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/23106251?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/20031441?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/15486292?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://player.vimeo.com/video/5606758?autoplay=1&loop=1&title=0&byline=0&portrait=0&badge=0', 'https://youtube.com/embed/WjNssEVlB6M?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/6rxakx15q7c?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/W3sAmt2K6UI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/gKmOzevJMIg?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/sVzhsdovcDQ?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/l73eXG6qQrk?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/MELEuPAAdwY?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/Cbmkkho3JqY?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/STYr6DeLIW0?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/8IM0CSO7bsc?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/KdxOianIAJs?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/qDxCO6VZO4Q?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/CmqYwvaAGec?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/Of76KPbjGdw?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/4oxfoEYo4DU?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/DRHvV0sAax0?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/ugpIRqdGX5E?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/f4dsafIy1kM?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/usK_iQVv8B0?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/rZrEyAJzGGQ?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/0ckDxlncxV0?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/tkkSBE0-Tfg?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/ZB89MR3w0sg?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/gZj5jNJ2yzI?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/qmUiVrUVd_E?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/OK4HbNzZfAs?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/sTTobW7Y-Uw?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', 'https://youtube.com/embed/VHLZs034Rf0?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1', ]; // Everytime the page is refreshed an other video of the list will be displayed var randomNumber = Math.floor(Math.random() * textArray.length); document.getElementById('video').src = textArray[randomNumber]; //--> </script>
This is a very simple way with no jQuery or additional plugins to play Youtube, Vimeo or any other iFrame Videos in the background of your website.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.