Mobile app version of vmapp.org
Login or Join
Megan663

: Hosting HTML5 video on Youtube/Vimeo, without using player I use the following <video> tag to play an HTML5 video as a background on my website: <video autoplay loop mob-hide>

@Megan663

Posted in: #Video #WebHosting

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

10.03% popularity Vote Up Vote Down

Login to follow query

More posts by @Megan663

Login to post a comment!

3 Comments

Sorted by latest first Latest Oldest Best

 

@Sent6035632

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.

10% popularity Vote Up Vote Down

 

@Alves908

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:


Hide youtube controls
how to overlay div over another

10% popularity Vote Up Vote Down

 

@LarsenBagley505

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.

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme