# how to load random html files into a div in my index.html
**URL:** \
**Category:** web dev\
**Created:** [November 26, 2014, 6:45pm UTC](https://forum.kirupa.com/t/how-to-load-random-html-files-into-a-div-in-my-index-html/371910 "2014-11-26T18:45:50Z")\
**Posts on this page:** 8\
**Page:** 1
hello,
i had found what i was seeking in one of your tutorials ([Loading a Random HTML Page Inline](http://www.kirupa.com/html5/loading_random_page_inline_pg1.htm)
however, for any number of reasons, it simply will not work for me.
what i need is either
(1) able to show random video (.mp4) clips from my own domain as html background movie (like background picture)
OR
(2) load a random html file (that contain one .mp4 video file each) into a defined
location in my index.html file so one of my vid-01.html, vid-02.html, … vid-10.html files load as background video of my index.html PER refresh.
* * *
**each vid-xx.html file contains:** (vid-xx.html and myvid-xx.html have XX for numbers 01, 02, … etc.)
```
video
```
* * *
**CSS file:**
```
/* CSS Document */
@charset "utf-8";
video#backvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -1000;
background: url(images/vidimg.jpg) no-repeat;
background-size: cover;
}
body,td,th {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: transparent;
background-color: transparent;
}
#contentArea {
background-color: transparent;
background:url(images/meh-c.png) no-repeat right bottom;
height: 100vh;
width: 100%;
}
#cf {
position:relative;
height:150px;
width:200px;
margin:0 auto;
}
#cf img {
position: absolute;
left: 0;
-webkit-transition: opacity .50s ease-in-out;
-moz-transition: opacity .50s ease-in-out;
-o-transition: opacity .50s ease-in-out;
transition: opacity .50s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
#retro1_image {
margin: 0 auto;
width: 210px;
height: 200px;
transition: background-image .5s ease-in-out;
background-image: url(images/retrolink-1a.png);
}
#retro1_image:hover {
background-image: url(images/retrolink-1b.png);
}
#retro2_image {
margin: 0 auto;
width: 210px;
height: 200px;
transition: background-image .5s ease-in-out;
background-image: url(images/retrolink-2a.png);
}
#retro2_image:hover {
background-image: url(images/retrolink-2b.png);
}
#retro3_image {
margin: 0 auto;
width: 210px;
height: 200px;
transition: background-image .5s ease-in-out;
background-image: url(images/retrolink-3a.png);
}
#retro3_image:hover {
background-image: url(images/retrolink-3b.png);
}
#retro4_image {
margin: 0 auto;
width: 210px;
height: 200px;
transition: background-image .5s ease-in-out;
background-image: url(images/retrolink-4a.png);
}
#retro4_image:hover {
background-image: url(images/retrolink-4b.png);
}.aliselvi_box {
background-color: transparent;
}
```
* * *
**the index.html file goes like:**
```
..:: aliselvi.com ::..
```
* * *
thats about it… the images and video (.mp4) files are all under “/image”.
would be happy if this worked out.
---
The easiest way would be #1. Place a element on your page and programmatically set its src value to the random mp4 that you want. You can see an example of how to set the video src element at this slightly unrelated tutorial: [http://www.kirupa.com/html5/accessing\_your\_webcam\_in\_html5.htm](http://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm)
To ensure your video appears behind everything else, you need to set some CSS properties. Here is an example (that I haven’t verified) that should work:
```
#myVideo {
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1000;
}
```
Let me know if you need help with the CSS, and I can take deeper look at it.
Cheers,
Kirupa =)
---
thank you but i already have that code in my CSS file.
what i need is how to make it so my index.html file (upon loading or refresh) chooses one the the 10 video .mp4 files randomly and puts in into the body?
---
> [@aliselvi](#):
>
> Loading a Random HTML Page Inline
as a side note;
i tried the [Loading a Random HTML Page Inline](http://www.kirupa.com/html5/loading_random_page_inline_pg1.htm) tutorial without any modification (just copy pasted) and it didnt work. i even used the good.html and evil.html files made just so i didnt modify ANYthing in the given codes.
and the only thing contained in the good/evil files were different color background and “good” / “evil” words written in the files respectively to see if they actually got loaded.
---
Are you testing locally or on a web server? Using the xhr approach, you need to be running via a web-server. That may explain why the example isn’t working for you when you try it locally.
Loading a random video is going to be similar to what I show here: [http://www.kirupa.com/html5/picking\_random\_item\_from\_array.htm](http://www.kirupa.com/html5/picking_random_item_from_array.htm)
Have an array with each item containing the path to a video. The code will allow you to pick a random one that you can then display into your video element.
Cheers,
Kirupa
---
