▼
Streaming live at 10am (PST)

Play video when a page loads

Design help General
#1

Hi:

I want a video to play when my page loads. And its ok if it keeps playing in a loop too. Is that possible?
I tried the following code. Replaced the type in bold with my video file name from server. It didnt work at all. I even kept the Position: relative and Overflow: Hidden

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;">
  <source src="http://syddev.com/jquery.videoBG/**assets/tunnel_animation.mp4**" type="video/mp4" />
  <source src="http://syddev.com/jquery.videoBG/**assets/tunnel_animation**.ogv" type="application/ogg" />
  <img src="http://syddev.com/jquery.videoBG/assets/tunel_animation.jpg">
</video>

Best
saaniya

#2

Hi in order for the code to work your urls to videos have to work. And for instance your urls don’t.

http://syddev.com/jquery.videoBG/assets/tunnel_animation.mp4 this doesn’t work

replace it by http://syddev.com/jquery.videoBG/assets/tunnel_animation.mp4

and try again (:

#3

Can you tell me more about what is not working? What system and browser are you using?

#4

Hey guys: Thanks for responding.

Dropbox link: https://www.dropbox.com/s/h3ivzmn7c0z3316/Bluesmart%20Mia.mp4?dl=0

Google Chrome: Version 42.0.2311.90 (64-bit)

MacBook Pro (Retina, 15-inch, Early 2013)
Processor: 2.7 GHz Intel Core i7
Memory: 16 GB 1600 MHz DDR3
Graphics: Intel HD Graphics 4000 1024 MB

#5

Here is the code I tried then:

<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;">
  <source src="http://syddev.com/jquery.videoBG/http://www.dropbox.com/s/tb1p89zg9jvdkqn/Example.mp4?dl=0" type="video/mp4" />
  <source src="http://syddev.com/jquery.videoBG/http://www.dropbox.com/s/tb1p89zg9jvdkqn/Example.mp4?dl=0.ogv" type="application/ogg" />
</video>
#6

As I said before, your video links have work on a browser and link to the real file for the code to work later.

So for example, your link:

https://www.dropbox.com/s/tb1p89zg9jvdkqn/Example.mp4 doesn’t link to the file but to a video player on the Dropbox site. For your link to link the actual file, change the url to this:

http://dl.dropboxusercontent.com/s/tb1p89zg9jvdkqn/Example.mp4

#7

remove

  http://syddev.com/jquery.videoBG/

change

http://www.dropbox.com/s/tb1p89zg9jvdkqn/Example.mp4

to

http://dl.dropboxusercontent.com/s/tb1p89zg9jvdkqn/Example.mp4
1 Like
#8

Thanks, Vincent. It works. I will try it with my actual video now and see. I have another quick query regarding centering of left aligned text & it being responsive. Will start another thread under a new topic for that.

Thanks
Saaniya

#9

@vincent has got it right to get the video to play.

I was thrown off by the first bold comment because you were trying to bold pre-formatted text which looks like this

**bold**

If you are experiencing strange positioning behavior I would remove the position:absolute; z-index:-1 code and apply a class and the styling you want to the embed widget.

#10

Thank you both, Vincent & David. I was able to make the video work well. appreciate the help :slight_smile:

#11

David I had to reformat saaniyas posts because all the code has to be formatted, unless it doesn’t appear at all in the forum :smile:

#12