0

Is there any way to set a full screen video background for a web page without using Flash?

I was considering html5 but I cannot leave Internet Explorer out.

Any ideas?

Thanks a lot

ADM
  • 1,590
  • 11
  • 36
  • 54
  • 1
    Seeing as there has been confusion about what "full screen" actually means. Can you clarify? Do you mean the whole screen, or the whole document? – Pekka Sep 06 '11 at 20:13

6 Answers6

2

It is not possible without installing additional add ons or objects with internet explorer. HTML5 allows to embed videos in your website, but not all browser provide full-screen support for that. Maybe is to use Google's Chrome Frame an idea.

Have a look at the HTML5 specification:

User agents may allow users to view the video content in manners more suitable to the user (e.g. full-screen or in an independent resizable window). As for the other user interface features, controls to enable this should not interfere with the page's normal rendering unless the user agent is exposing a user interface. In such an independent context, however, user agents may make full user interfaces visible, with, e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

It is also possible to embed Microsoft's Windows Media Player, but not in background... Here a working example: http://www.html5-fullscreen-video.com/

Robin
  • 8,162
  • 7
  • 56
  • 101
1

I think that you need to first establish why you are not keen on using Flash. If the reason is that you want to target mobile devices, then using HTML5's <video> in combination with a Flash player fall back is definitely viable.

Unfortunately HTML5 is not fully supported in every browser - especially IE. This is probably why you will still need to use Flash at some point.

So assuming that you would like to give the "HTML5's <video> + Flash fallback" method a shot for your full screen background video, here's what you could probably do:

HTML:

<video id="bg-vid" autoplay controls>
  <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <source src="video.mp4" />
  <object id="flash-vid" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf"> 
    <param name="movie" value="flowplayer-3.2.1.swf" /> 
    <param name="allowfullscreen" value="true" /> 
    <param name="flashvars" value='config={"clip": {"url": "http://yoursite.com/videos/video.mp4", "autoPlay":true}}' /> 
  </object>
</video>

And then you style it like this for a full screen effect and proportional cropping/stretching:

#bg-vid, #flash-vid{
   min-height: 100%;
   min-width: 1024px;
   width: 100%;
   height: auto;
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
}
vynx
  • 1,269
  • 1
  • 12
  • 20
0

Is there any way to set a full screen video background for a web page without using Flash?

If you mean true fullscreen - occupying the whole, physical screen - nope. No modern browser allows this in pure HTML.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • do you actually mean that older browsers doesn't allow this in pure HTML? cos in fact, there are modern browsers that are able to support HTML5's – vynx Sep 06 '11 at 19:31
  • @scornork a full-screen ` – Pekka Sep 06 '11 at 19:33
  • you can target the – vynx Sep 06 '11 at 20:03
  • @scornork your link looks pretty cool (I *love* background video), but I can't see a button to switch to full-screen mode when visiting the site in Chrome? What browser do I need to use? – Pekka Sep 06 '11 at 20:07
  • 1
    @scornork tiny typo in the video: `Jarkata` instead of `Jakarta` (not important probably and too late anyway, but you know we programmers have a keen eye for detail :) – Pekka Sep 06 '11 at 20:09
  • i think you've misunderstood the thread author's point about a full screen background video. i stand to be corrected, but i think that what he/she really meant was for the video to be style like a full screen background image - which is what it is now on chrome, ff, safari, ie9 and ie8. if you're talking about having a full screen toggle to make the video blow up then all you gotta do is to enable the controls and apply some jquery to ensure that the full screen toggle is available across every browser (by default it isn't available on ff) (oops. think we overlooked that typo =P) – vynx Sep 06 '11 at 20:11
  • @scornork I think *you* misunderstood that part - Flash can do *real* full screen, as in "left top corner to bottom right corner of the monitor". HTML5 can do that, too, but as far as I know, you can't put web site contents on top of it – Pekka Sep 06 '11 at 20:11
  • that's where you are absolutely wrong. by targeting the – vynx Sep 06 '11 at 20:14
  • @scornork okay, so show me HTML5 fullscreen (*real, physical* fullscreen, not just the entire document, but the entire monitor) video with HTML elements on top of it, like Flash can do. I'm saying that's not possible. I'm happy to be proved wrong but I don't think I am – Pekka Sep 06 '11 at 20:15
  • dude, its at www.blueprint.sg the background video is bleeding to the edges of your browser screen. that is what full screen is isn't it? try it on FF or in Chrome. the elements on top of the video are the menu and all? – vynx Sep 06 '11 at 20:18
  • @scornork no, that is **not** what full screen is. Full screen is bleeding to the edges of your *actual* screen. Flash can do this. Go on Youtube, open any video, and click the button to the bottom right. – Pekka Sep 06 '11 at 20:19
  • that is why i'm saying you have misunderstood the point to begin with. he is asking for a full screen video background and was considering HTML5 in the first place which naturally means he is not asking for a full screen video to bleed to the edges of the actual screen, but one that bleeds to the edges of the browser. – vynx Sep 06 '11 at 20:24
  • @scornork as per the spec, HTML 5 *can* offer that kind of full screen video, which is why I'm fairly sure he is asking about *real* full screen. But only the OP can tell that for sure (but reading the question again, you may be right.) – Pekka Sep 06 '11 at 20:25
  • perhaps the best way is for the thread author to clarify what type of full screen he is looking for. nevertheless, kudos to you for making your answer a little clearer. think it was good that we had this discussion cos at least everyone will be clear on the distinction between browser base full screen and actual-monitor full screen – vynx Sep 06 '11 at 20:27
0

Well you COULD do a sprite animation if it's just a short animation/video but i'm pretty sure the performance wouldn't be satisfactory. not to mention the image size

Andy
  • 29,707
  • 9
  • 41
  • 58
  • What exactly are you talking about? How does this address the issue of a full screen video background on a HTML page? I don't understand. – Pekka Sep 06 '11 at 20:18
0

If you need to support IE versions 8 and earlier, and want to avoid Flash, then you could build a video player in Silverlight, concerning HTML5, as the other people mention, it does not allow full screen playback, the best it offers it full window playback.

Hope that helps, but I imagine that if you're trying to avoid Flash then you're actually avoiding using plugins.

Daniel
  • 23,129
  • 12
  • 109
  • 154
0

Seems you can. See this question. And check out the VideoBG jQuery plugin. Rather laggy, and not great browser support, but it does work :)

Community
  • 1
  • 1
Michael Mior
  • 28,107
  • 9
  • 89
  • 113