I found this html5 video player which supports youtube source. But it didn't have a fullscreen button, so I started to implement the full screen function.
My problem now is that on chrome or safari the video doesn't take 100% width (not really fullsize, i have a black gap on all sides).
I used this script:
$('.video-fullscreen-btn', player).bind('click', function(e){
if (player.requestFullscreen) {
player.requestFullscreen();
} else if (player.msRequestFullscreen) {
player.msRequestFullscreen();
} else if (player.mozRequestFullScreen) {
player.mozRequestFullScreen();
} else if (player.webkitRequestFullscreen) {
player.webkitRequestFullscreen();
}
});
I also tried it with the css webkit
:-webkit-full-screen video {width: 100%; height: 100%;}
still not working. does someone have an idea why this is not working on chrome/safari?
The whole example can be found here: http://jsfiddle.net/Z5PTv/
I think it is just due to the aspect ratio of the actual video content. If you look at the original youtube video it also has black bars either side of the video.
That is why the preload image looks pixelated because the image, which has the same aspect ratio as the video I assume, has been forced to take up the space.
If the video was to be the full width of the screen the top and bottom of the video would be clipped off. I assume you would rather have black bars on the side rather than clipping.
If the problem is aspect ratio you can control is with CSS object-fit: fill;
But this is only supported in Opera right now.
If the video element is using 100% of the screen this doesn't mean that the video-image it self will be stretched to fill the whole screen. You can opserve this by using the controls attribute on the video element and notice how the controls can be wider then the video-image.
Demo : http://netkoder.dk/netkoder/eksempler/eksempel0017.html
Related
I am building an app that requires a full page background image. I am using Angular JS and CSS3 for the background image.
On page load, the <body back-img> custom directive is hit and runs the following code:
var grindModule = angular.module('grindApp', ['ngRoute'])
grindModule.directive('backImg', function(){
return function(scope, element, attrs){
var url = ['./../static/images/pushup.jpg', './../static/images/work.jpg']
var idx = Math.floor(Math.random() * url.length)
element.css({
'background': 'url(' + url[idx] +') no-repeat center center fixed',
'background-size' : 'cover'
});
};
A random index is generated and then is used to get a random image url from the array that stores them. It then places said url in the following piece of codebackground: url().
Once the page loads the page looks like this:
Notice the black white space at the bottom of the screenshot. I don't want this. This background is working on all devices except this particular phone (that I know of). This bug is only generated when I am using the mobile version of the Chrome browser. It does not happen when I use the mobile Firefox browser. Seems to be Chrome specific, but I could be very wrong.
Here is all of my code if you feel like that could help you: Grind Github.
I had a look at your website.
This is my train of thought:
1) The browser on that mobile could be outdated and is not supporting the "cover" property correctly. But the issue with this is that you've added "center center" as the background position, so, at the worst, the browser -should- be displaying that image aligned at the center of the page by it's center at full scale, which it is not.
2) The fact that the image is not even centered, makes me think that the "body" element is somehow not functioning properly with a height set at 100%. Try adding height 100% to your HTML tag as well.
html,body {
height: 100%;
}
3) If #2 didn't fix it, then I would try and add another element into the page, just after the starting <body> tag like this:
<div class="bg-fullpage-wrapper"></div>
The style for this element should be:
div.bg-fullpage-wrapper {
/* Your current background stuff here ie:
background: url("./../static/images/work.jpg") 50% 50% / cover no-repeat fixed;
*/
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
Remove the height 100% from body tag for this attempt. You'll have to fix z-index of elements when you do it like this.
4) If this DIV doesn't make it work, then I would probably start thinking in terms of browser resources running out etc since the images that seem to load up for me are massive for web format, there might be issues with downscaling from/to that resolution.
This is a CSS issue, not a JS issue. Outside of that, however, I have no idea what's going on behind the scenes.
head {min-height: 100%}
That's all I know.
Reproduced on an Xperia Z2 with Chrome https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging
I am having an issue with Video streaming on vlc plugin in Windows safari. I have added windowless="true" attribute in embed tag so that I can display transparent DIV above vlc plug in for Drawing on video. After adding this tag video is stopped and video frame is not received. But When I click on video or draw something on video, video frame refreshed for a while. Even if when I remove windowless="true" attribute video works.
Issue is observed in windows safari only with windowless="true".
I have the exactly same behavior. Windows 10, Safari 5.1.7.
So far the only solution I found is a workaround to force browser updating the player's frame. I do it by quickly adding and removing a "glass" div: a region that occupies whole browser's screen and has an opaque background fill color. Since it's transparent there is no any visible changes on the screen but Safari always redraws overlapped regions even if they are overlapped by a transparent pane. Here is what I do:
function play() {
// ...create player, set properties, etc.
// assuming player taking whole browser's screen.
// It's a glass pane - it should cover whole player's output surface.
var glass = $('<div>');
$('body').append(glass);
// Here we start updating...
setInterval(function() {
$('body').toggleClass('glass');
}, 20); // <== 1000ms / 30fps = 33ms, put 20ms just in case.
}
.glass {
position: absolute;
width: 100%;
height: 100%;
z-index: 10000;
background-color: rgba(40,1,1,0);
}
Of course, you need to adjust z-index so what glass is overlapping player surface but not blocking your custom controls.
Yes, it's an ugly hack but it works as a short term solution.
I am a skilled database / application programmer for the PC. I am also an ignorant html / javascript / web programmer.
I am creating some documentation about some .Net assemblies for our intranet. Ideally I would like to display an image full size if the browser window can fit it. If not then I would like to reduce it and toggle between a small version and full size version by a click. It is a dependency chart and can be different sizes for different pages. I would prefer a single function to handle this but being it is for our use none of the requirements I mentioned is set in stone. I would like to make it work well but nothing is mandatory.
I read a lot of stuff but couldn't find anything that matched what I wanted. First I tried this (after a few iterations):
<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width=this.naturalWidth;this.height=this.naturalHeight;' ondblclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width="100%";'>
It has problems. First off it enlarges a small image and it looks funny. Second I would have to put the code in every page. Third it requires a double click to restore it. I was going to live with those short commings but the double click fails. I can't figure out how to restore it.
So I tried to get fancy. I couldn't figure out how to get past problem 1, but solved 2 and 3 by creating a function in a separate file. Then I ran into what appeared to be the same problem. This was my second attempt:
function ImageToggle(Image)
{
if (ImageToggle.FullSize == 'undefined')
ImageToggle.FullSize = false;
if (ImageToggle.FullSize)
{
Image.width='100%';
ImageToggle.FullSize = false;
}
else
{
Image.width=Image.naturalWidth;
ImageToggle.FullSize = true;
}
return 0
}
And in my page:
<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='ImageToggle(this)'>
Can what I want be done? It doesn't sound impossible. If it is a large amount of effort would be required then alternate suggestions are acceptable.
You're probably interested in the max-width: 100% CSS property, rather than a flat-out width:100%. If you have a tiny image, it'll stay tiny. If you have a huge image, it gets resized to the width of the containing element.
For example: http://jsbin.com/kabepo/1/edit uses a small and a huge image, both with max-width:100%. As you can see, the small image is untouched, the huge image is resized to something sensible.
I would recommend that you set a the max-width: 100% CSS property for the image.
This will prevent the image's width from expanding to be greater than the container's width.
You can also do the same with max-height: 100% if you are having problems with the image overflowing vertically.
Please see this JSFiddle for an example.
(Note: If you set both a width and a height attribute on the <img> tag directly or in your CSS file your image will not be scaled proportionally.)
Does it have to be a toggle or would a mouseover work for you as well?
<style>
.FullSize { width:100px; height:auto; }
.FullSize:hover { width:90%; height:auto; }
</style>
<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">
Note: when image is made larger IN the page - the surrounding content will be displaced around it - depending on how you have set up the layout.
Also if you have any body margins or table or div paddings, using image width at 100% will make the page scroll. To check just change 90% to 100% and work your way up / down.
You could also force the image to be a specific size until the browser gets made smaller by the user / has a smaller resolution.
<style>
.FullSize {width:1000px;max-width:100%;height:auto;}
</style>
<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">
A tip: the image used must be the largest one. So minimum width of lets say 1200 pixels wide (if that is the forced image size you use). That way regardless of size it is it will remain clearer than a small image becoming a large. Since it's an intranet, file size shouldn't be an issue.
Thanks all for your help. Rob and Mike both pointed me to an excellent solution. I now have my page load with an image that fits the browser window, resizes with the browser and if the user is interested they can expand the image and scrollbars appear if necessary. I got this to work in a function so minimal code is needed for each page.
To load the image:
<p style="overflow:auto;">
<img src='Dependancy Charts/RotairAORFQ.png' width="100%" onclick='ImageToggle(this)'>
</p>
And the function:
function ImageToggle(Image)
{
if (ImageToggle.FullSize == 'undefined')
ImageToggle.FullSize = false;
if (ImageToggle.FullSize)
{
Image.style="max-width: 100%";
ImageToggle.FullSize = false;
}
else
{
Image.style="max-width: none";
Image.width=Image.naturalWidth;
ImageToggle.FullSize = true;
}
return 1
}
if you want to get current browser window size and if you want to do it on a click event so try this in jquery or javascript:
<script>
$("#myButton").click(function(){
var x = window.innerHeight; // put current window size in x (ie. 400)
});
</script>
My video is instantiated from markup, with a width and height (dummy values actually).
<video id='ytvidplayer' class='video-js vjs-default-skin' controls autoplay
preload='auto' width='xxx' height='xxx' poster='xxx'
data-setup='{}'>
<source src='xxx' type='video/mp4'>
<source src='xxx' type='video/webm'>
Whoops. Your browser does not Support HTML5 or Flash. Please upgrade your browser.
</video>
I am resizing my video once the page is rendered, to be one third (33%) of the screen size in width. This all works well.
var newHeight
var newWidth
newWidth = $(window).width() * 0.33;
newHeight = newWidth * 0.75;
$('#ytvidplayer').css('height',newHeight);
$('#ytvidplayer').css('width',newWidth);
//set related video div height eual to video height
$('#related_vids_scroller').css('height',newHeight);
var myVideo = videojs('ytvidplayer');
myVideo.width(newWidth).height(newHeight);
Everything works as expected, until I try to go fulslcreen. When the fullscreen button is pressed, the physcial "black" container of the video object goes fulslcreen, but the video stays at the API-resized width and height.
Is this a bug in video.js to not take the API-resized values into account (overriding) them on going fullscreen?
When I do not physically resize the video using the API, and have just the original markup (with a width and height)... fullscreen works fine.
I have tried using 'auto" for with and height in the markup, to try and have the video resize to its container ( a 33% div ), so I don;t have to resize it myself using the api. But on w=auto and h=auto, the video renders with no height, but seems to have the correct width... and it plays.. its just invisible (video progress bar is there tho, and at the correct width (fills the 33% div).
I have tried attaching to window.resize, but have difficulty in resizing the video using API there, is its a "toggle" really.. need to know if I am exiting or entering fullscreen mode... based on that, I need to resize up or down...
Any ideas? Am I over-complicating this?
Setting css width and height on #ytvidplayer will be the problem. #ytvidplayer will either be a video element or a div depending on whether the player has been created at that point. Removing these and only resizing with the API only should work:
$('#ytvidplayer').css('height',newHeight);
$('#ytvidplayer').css('width',newWidth);
Lets say that we have an image uploaded by the user, the upload script limits the mb but not the image size (so could be any proportion, 600X200,200X350, and so...).
Im already showing this image in one part on my site using the twitter bootstrap image handler written on css, thats good for a profile picture, the problem is that now I want that image to be a cover (like facebook/twitter cover image), my site is responsive so the width of the cover is 900px or 100% if the screen resolution is less than 900px wide. The height is always fixed to 200px. So I know there is a way to control the correct image display using CSS (maybe with jquery too) but Im not a front-end dev, Im a php dev and I dont want to use server side scripts for doing this. So im looking for suggestions or pieces of codes (css, javascript) to start with, I belive that it have to be an already made solution for this, but I dont find any on google. Thanks for any advice!
I would definitely not advise to use a css-only solution. Not even a client-side solution if the uploaded pictures can have any resolution. You want to use a php script to save resized versions of the uploaded images and serve those to the client. Either as a block's background-image and use css (not cross browser) or as an img tag and use js to resize.
css:
.myselector{
background-size: cover;
}
or js (jquery):
$(function(){
var containers = $('.myselector'), w = $(window);
function onResize(){
//resize code
containers.each(function(){
var $this = $(this),
w = $this.width(),
h = $this.height(),
ratio = w/h,
$img = $('img',$this); // assuming there is only one img in each container
$img.css({'width':'auto','height':'auto'});
var iw = $img.width(), ih = $img.height(), iratio = iw/ih;
if(iratio>ratio){
$img.css({
height:'100%',
width:'auto',
marginLeft: (w-iw*(h/ih))/2
});
}
else{
$img.css({
width:'100%',
height:'auto',,
marginTop: (h-ih*(w/iw))/2
});
}
});
}
w.bind('resize',onResize);
//resize on each image load event
$('img',containers).bind('load',onResize);
onResize();
});
Here is a working fiddle : http://jsfiddle.net/kHxd2/2/
The image's onload listener might need tweeking to react when cached images are rendered in IE: http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
Also you might want to set css rules for rare non-js browsers... (.myselector img{width:100%;})
EDIT : container css:
.myselector{
width: 100%;
max-width: 900px;
height: 200px;
margin: auto; /* centering */
overflow: hidden;
}
see updated fiddle: http://jsfiddle.net/kHxd2/3/
The best solution is to embed the image containers in a main wrapper div and apply the above css rules to that big container.
Here is some useful code to take care of server-side resizing : http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html
You have to put this image as background-image, and then use style:
background-image: url(url/to/your/image.png);
background-size: cover;
There is a property in css3 called as background-size:cover; and background-size:contain;. You might want to use them to suit your needs.
contain
Specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
cover
Specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.