Jump to content

Changing video source depending of screen size


Recommended Posts



I would like to change my video sources :

<source src="../medias/grece_1.mp4" type="video/mp4">
<source src="../medias/grece_1.ogg" type="video/ogg">
<source src="../medias/grece_1.webm" type="video/webm">

with :

<source src="../medias/grece_2.mp4" type="video/mp4">
<source src="../medias/grece_2.ogg" type="video/ogg">
<source src="../medias/grece_2.webm" type="video/webm">

if the screen width is less than 600px.


Is it possible and what's the code?

Link to comment
Share on other sites

Well it wouldn't work, because that not how bootstrap media queries work, you give them a identifier such as class or id, and use that to show or hide depending on requirement when specific media width is reached.


OR you could use one or more of bootstrap hidden-lg hidden-md hidden-sm hidden-xs to do the same thing when specific width is reached by media queries.


NOTE:lowest fixed min-width is 750px, below that it is fluid but you can adjust or add you own specifically for these video tags.

Edited by dsonesuk
Link to comment
Share on other sites

I would not recommend loading two videos and then only showing one of them. Use Javascript to modify the properties of the video once the page has loaded.


This stackoverflow thread explains how to change the video source:


Link to comment
Share on other sites

But how to change if the width of the screen is bellow 600px and change back after it's more than 600px?



Whatever, I did my work with some buttons and it work, but I would like to know if it's possible to change with screen width... Hate that at school they say us to do that without explanation even if no website are doing that lol.

Edited by Nic727
Link to comment
Share on other sites

It depends, width when landscape compared when width by portrait, you would need to identify device width and height to determine which video to load, example 640 by 360 device, do you use larger or smaller size video, remember you can view it landscape or portrait view, it can by your description move from to the other on the same device. So you'll probably want to check the smallest width of the two first.

Link to comment
Share on other sites

You can detect the window's width using the innerWidth property. This page has a cross-browser solution as well: http://www.w3schools.com/jsref/prop_win_innerheight.asp

So what you would do is:


if( window width is 600 or less) {

Change video source to small video

} else {

Chang video source to large video


  • Like 1
Link to comment
Share on other sites

OK! We have establish the retrieval height and width of window using innerWidth and innerHeight. But! You still have the potential problem of loading large hd movie for mobile device whose landscape is greater than 600px compared to portrait less than 600px such as 480, so checking width only is not enough, you need to check both.

Link to comment
Share on other sites

  • 3 weeks later...

LOOK devices that have a width greater than 600 when viewed landscape, but! Have a portrait view of 360 WILL LOAD BOTH HD OR LOWER QUALITY depending on the view, SO you need to establish if the overall dimensions of this device warrants a HD quality OR Lower quality.


I.E. if width OR height <= 600 load Low quality ELSE load HD quality.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...