6

I use the following <video> tag to play an HTML5 video as a background on my website:

<video autoplay loop mob-hide>
    <source src="../Images/myvideo.mp4" type="video/mp4" />
    Your browser does not support the video tag. I suggest you upgrade your browser.</video>

At the moment, I am hosting this on my web server, but would ideally like to host it on one of the freely available video sites, e.g. YouTube or Vimeo. Is it possible to do this, without embedding one of their players? NB: this doesn't need to work on mobile

  • Not possible although I would love to be proven wrong. – William Feb 15 '16 at 17:05
  • I don't believe that YouTube or Vimeo allows you the source file URL. Though it would be nice. What is the reason you want to move your video off your own server? – Avail Feb 15 '16 at 17:22
  • @Pixl Ahhh, that's a shame. I am just trying to reduce the load on my server. – George Edwards Feb 15 '16 at 17:23
  • 4
    Use Cloudflare that'll dump 60-90% of your requests right there. – Simon Hayter Feb 15 '16 at 17:29
  • 2
    Use the "youtube-dl" perl script with the -j attribute to find the source video URL, you can then make a regex to get all the videos URLs or whichever specific one you would like to use. Once installed simply "youtube-dl -j youtube.com/watch?v=VIDEO_ID". Keep in mind that youtube source URLs will expire so you would have to setup some sort of script to grab the video URL when needed. Dirty solution that i don't recommend since there are better options but it would work. – Analog Mar 6 '16 at 12:41
1

You can use Youtube and Vimeo to host your videos for free, however you will not be able to access the files directly, as they embed their own ads like Zhaph mentioned.

If you choose to do that, you might want to use Video.js player, so you can provide a more personalized user experience.

Another popular option is to use a CDN, like Simon mentioned.
I use Cloudflare and very happy with it.

3

Vimeo has the option to give you a link if you have a paid account. You can generate a privaté download link to do this for multiple resolutions if needed.

An other option would be to just embed there player and add the "?background=1" in the embed link as explained here:

https://vimeo.zendesk.com/hc/en-us/articles/115011183028-Embedding-background-and-chromeless-videos

0

If I've understood you correctly, you're trying to show a video in the background that plays automatically, is hosted on youtube and that you can overlay text on it.

if that's what you're looking for then the following solution should work for you.

I believe you can use two div, one div with youtube video can act as background and the other div can be used to host the content that you want to overlay

I mixed two solutions provided on stackexchange network and came up with this:

<html>
    <head>
        <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
        <script type="text/javascript">
            function showFrontLayer() {
                document.getElementById('bg_mask').style.visibility='visible';
                document.getElementById('frontlayer').style.visibility='visible';
            }
            function hideFrontLayer() {
                document.getElementById('bg_mask').style.visibility='hidden';
                document.getElementById('frontlayer').style.visibility='hidden';
            }
        </script>
        <style type="text/css">

        #bg_mask {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            margin-top: 0px;
            width: 981px;
            height: 610px;
            background : url("img_dot_white.jpg") center;
            z-index: 0;
            visibility: hidden;
        }

        #frontlayer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 70px 140px 175px 140px;
            padding : 30px;
            width: 700px;
            height: 400px;
            background-color: transparent;;
            visibility: hidden;
            border: 1px solid black;
            z-index: 1;

        }


        </style>
    </head>
<body>
<form action="test.html">
    <div id="baselayer">

        <input type="text" value="testing text"/>
        <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

          <iframe width="100%" height="400" src="https://www.youtube.com/embed/BrEm2dcoFxo?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
            <div id="bg_mask">
            <div id="frontlayer"><br/><br/>
                Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
                Use position: absolute to get the one div on top of another div.<br/><br/><br/>
                The bg_mask div is between baselayer and front layer.<br/><br/><br/>
                In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
                <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
            </div>
        </div>
    </div>
</form>
</body>
</html>

Reference:

  1. Hide youtube controls
  2. how to overlay div over another
0

Getting a Background music with YouTube is easy and works on mobile:

<iframe width="0" height="0" src="https://www.youtube.com/embed/60ItHLz5WEA?autoplay=1" frameborder="0" allowfullscreen></iframe>

Setting the iframe to 0x0 mean you can't see the video, the autoplay option is used to start the music automatically

Edit: sorry, I just misinterpreted, this is only for background music.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.