how to set html5 video tag source from css

Question

Anyone with html css expertise help me out with this simple problem that I am unable to solve.

Basically, my html page has a video element which has a src attribute attached to it.

Now, what i want to do is, remove this src attribute from the video element and put this source in the css class of that video element.

So, how can I set the src of the video element from css?

I have tried using url,content attributes but it does not seem to work.
Or maybe i am doing it wrong. i would be grateful to anyone who could provide any input for this or share a small code which would use css to set the source of an html5 video element. please help me. Thank you.

why? could you please explain. i mean, it is possible to set the source attribute of an img tag from css, but not for a video. why? — Harshit, Feb 22 '17 at 07:38
@Harshit: That's not possible either. You can set a background image from CSS, but that doesn't affect a element's attributes. — Cerbrus, Feb 22 '17 at 07:42
You can't do that ("changing img source") with CSS either, unless you are playing with CSS property `background-image` which _can_ be changed by CSS. The reason why CSS doesn't do it is because it's not designed to do that. — KarelG, Feb 22 '17 at 07:44
@Cerbrus may be. but this works for an img .MyClass123{ content:url("http://imgur.com/SZ8Cm.jpg"); } — Harshit, Feb 22 '17 at 07:47
@KarelG so can that same method be used for video element? can i set background src or something from css? so that it plays the video and the source comes from css — Harshit, Feb 22 '17 at 07:49
@Harshit: That's not the same, and there's not something like that for video elements. — Cerbrus, Feb 22 '17 at 07:59
I can see your generated image content approach working in Chrome 56, @Harshit. The same approach is not working in Firefox 51. — Rounin, Feb 22 '17 at 08:03
@Cerbrus ohh ok. thanks. so, i guess i'll just use jquery to get the src dynamically. could you please also tell me one more thing. does using display:none for a video element prevent the video from loading also? because i dont want to load the video for mobile devices. so, display:none would work? or should i set a blank src dynamically using jquery for mobile devices? — Harshit, Feb 22 '17 at 08:06
@Harshit: the `display:none` question is answered [here](http://stackoverflow.com/questions/27954664/if-an-element-is-display-none-in-a-media-query-are-they-loaded-in-still). — Cerbrus, Feb 22 '17 at 08:08
ok thanks @Rounin i think i should just use jquery instead. could you also take a look at my above question in my comment. thanks — Harshit, Feb 22 '17 at 08:08
@Cerbrus still confused. the link you gave has another link in the answer http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading and there some answers say yes while others say no, its not loaded. maybe the question is old and browsers have changed. so, could you please clarify once..what happens, as of today, while using display:none. or any other better method by which i can prevent video or images from being loaded on mobile sites?? — Harshit, Feb 22 '17 at 08:17
use `preload="none"` (HTML5 video tag attribute) if you don't want to be loaded initially. — KarelG, Feb 22 '17 at 08:18
@Harshit: The answer is that it depends on the browser. So a safer option is not to set the `src`, for mobile browsers. — Cerbrus, Feb 22 '17 at 08:19
My answer is the same as @Cerbrus. It's safer not to assume that `display:none` will prevent loading. Better to use `data-src` instead of `src`. More info on the `preload` attribute here: http://www.stevesouders.com/blog/2013/04/12/html5-video-preload/ — Rounin, Feb 22 '17 at 08:24
@Rounin thank you. could you please take a look at this new method that i found and tell me whether or not the same approach could be used for video tag?? they have shown for an image whose source changes based on inline media query. i tried tweaking it for video element but in vain. so could you please just take a look at this https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture — Harshit, Feb 22 '17 at 09:05

score 1 · Accepted Answer · edited Jun 17 '17 at 01:07

You cannot set the video source via CSS. Because you see below the basic structure of video:

<video>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

You can set other attributes like background image, color, etc. However, you cannot set the source via css, which is used to design the play button & any other button functions. If you really need to do this without using <source src="sample.mp4" type="video/mp4"></source>, you will have to use JavaScript.

score 1 · Answer 2 · answered Mar 14 '20 at 03:30

1

I did it with CSS using the display set to none or block, so that the video ("sample.mp4" or "sample2.mp3" is played depending on whether the user is on his laptop or on his mobile.

HTML:

<video id='video'>
    <source src="sample.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
<video id='video2'>
    <source src="sample2.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

CSS:

#video2 {display:none;}

@media only screen and (max-width: 500px) {
    #video2 {display:block;}
    #video {display:none;}
}

answered Mar 14 '20 at 03:30

Joseph

11
1

1

This is a pretty good approach that I have used. One issue I found though is that if you set the "poster" attribute on each of video player (say one is a small image for mobile and another hires for desktop), BOTH banner images get downloaded....yes, the player with "display: none" still gets its banner image downloaded. It's strange because the source mp4 does not get downloaded if display is none. Maybe a bug in the player implementation? I mostly tested this in Chrome. – cakidnyc Dec 04 '21 at 18:10

how to set html5 video tag source from css

2 Answers2