I am trying to set up a HTML5 video player using video.js and Flat UI by DesignModo. I have the problem that I need to make the video player responsive, so the width needs to be 100%.
The problem is that then when this is set the height of the video is always the same as you can see in this fiddle. So what I need (I think) is a script which detects the aspect ratio as the aspect ratio will change. I found a script like that over here however it is designed for iframe videos like YouTube or Vimeo.
I attempted to modify the script by changing the value of $allVideos to $("video[class^='video-js']"), but it does not seem to have worked. Can anyone have a look at my Fiddle and try and tell me what's wrong and how to fix it?
By the way, I know that the links to the font files and image(s) are turning up 404, thats because at the moment the files are not hosted on my server, I have just been testing them locally.
Just remove the height: 100%; from .video-js .vjs-tech. And this take aspect ratio automatically from given width 100%.
Related
I've got a full page Youtube video embed on a page and recently I've noticed it defaults to low quality. I saw this is a common problem that had different solutions at different points in time so I was wondering if anyone has any new tips?
I've tried setting the width and height of the iframe to 1920x1080 and adding &vq=hd1080 or &vq=hd1080p to the source url but none of these seemed to work.
I'm using the picture element with srcset so the same image but with different resolution is downloaded based on the device screen size.
It's max-width: 100% on the image's styles so when it downloads it forces the content below to move.
Is there any way to tell the browser to reserve that space using CSS when using srcset?
I'm also interested on a JavaScript answer if it's not possible.
Thanks.
You could set the image height based on the image width. So the only thing you need to know is your cameras aspect ratio. If the images have different proportions, weve got a problem...
ratio=9/16;
window.onload=window.onresize=function(){
Array.prototype.forEach.call(document.getElementsByTagName("img"),function(img){
img.height=img.width*ratio;
});
};
So, on my website there are going to be mulitple videos all with different content that has been submitted by users and uploaded to the site.
Some videos that users have uploaded have different frame widths and heights.
For example:
(Video 1) - Frame width: 1280.
(Video 2) - Frame width: 480. Frame height 360.
The problem is that when a video with a different frame height is used, the actual HTML5 video itself changes it's height. It get's smaller or larger, I do not want that, I want all videos to remain the same size regardless of the video frame height.
Like Youtubes, all of the videos are exactly the same width and height, I want it like thiers.
To give you guys more of an idea of what I mean, I've gave a link below to the html file:
https://mega.nz/#!oMpwDQ7a!r5wO1GfG0c5Gj5dd5xE8pk1Udl5GxoaQ37pDwLAgcXk
.
Note: I have tried almost everything, changed CSS code 1million times, tried 3rd party apps, nothing is giving me what I want.
Best regards, thanks.
In order to have all videos be the same size, you will need to either stretch the video (typically bad, don't do this) or add bars to the top/bottom or sides to show the original video dimensions. With html5 video, all you need to do to achieve this is apply a width and height to the video tag.
<style type="text/css">
video{width: 500px;height:300px;position:relative;margin-top:-20px;}
video:hover{cursor:pointer}
</style>
Try this in your source file, it will cause all your videos to be the same size, and will simply add bars to the files to make them all take up the same space (note how it adds to the top/bottom on one, and the sides on the other).
Even youtube does this if you video file is of a different aspect ratio (you'll notice black bars on those youtube videos, ex: https://www.youtube.com/watch?v=2Or1Ui7yM7Q this video was shot on a square monitor, and is not widescreen aspect).
I have a rtmp video stream which is dynamically changing it's resolution and aspect ratio during the process of streaming and i wish to somehow play it on a web page.
For this purpose i have chosen a flowplayer solution, but it is not detecting video aspect ratio change during the process of streaming, though does that perfectly when flowplayer initially loaded and fetched video the first time (e.g. after reload of web-page with flowplayer on it). I wish to enable it do dynamically detect aspect ratio of the stream, changing it on-the-fly.
How it is possible?
I have tried different flowplayer' clip' scaling options, but they are affecting only the initial loading stage and constant all the time later.
Got it. Had to do the following thing in clip definition, now clip is resizing properly:
clip: {
onMetaDataChange: function(clip) {
clip.update({scaling: 'fit'});
},
... rest of the options ...
}
I'm working on my first responsive website and I want to know how to make all of the images resize dynamically. I've worked around it for now, but I'd really like to rethink how I did this. Is there a jquery plugin for this that is easy to implement (I don't know alot of js)? Is there a better way?
My site
You actually don't need any js for this - this could be achieved with CSS alone. As you figured out from looking at the source in the link in your comments, all that's needed for dynamically resizing an image is the max-width property set to 100%. However, if you want the image to increase in size dynamically as well then you'll have to use width:100%.
See the example in this jsFiddle. You'll notice max-width does not go past the image's resolution - on the otherhand width ensures the image fills the container (which some see as a disadvantage because they lose the resolution when the width exceeds it's original).
There is a catch though, max-width property is not supported in IE6 or below - it was only introduced in IE7. This article here provides a workaround for that though.
But resizing an image through css doesn't make an image responsive.
A 200 kb image will be 200 kb when it is 1000 px wide but also when it is resized by css to 50 px wide.
I would like to see you guys' faces when waiting untill that large images is loaded on your smartphone