Develop Reference

Showing a portion of an image using css but having it responsive with img-responsive

I have created a system where a user will upload an image, it's resized to a certain width and then the user can crop the image (was using imgAreaSelect but upgraded to Jcrop to add mobile usage).
I have this all working fine. Once the user moves the selector of Jcrop to where they want and chooses the save button I have jQuery write some fancy CSS to show the portion of the image the user wants (the rest is hid via overflow: hidden) plus more form to add photo credit and other information about the photo.
This again, works great... on a desktop. The image is full size on a mobile device and isn't responsive so you cannot see the majority of the photo. I've been trying to wrap my head around this for a while now (other than disabling the preview photo). Is there any way to get my method responsive?
$(document).on('click','#save-image',function() {
//$('img.mobimg').imgAreaSelect({remove:true});
//$('#the-image').fadeOut();
//Write the preview image using variables from image selector.
$('#the-image').fadeOut().html('<div align="center"><div id="img" style="position: relative; width: '+$('#w').val()+'px; height: '+$('#h').val()+'px; overflow: hidden;">'+
'<img src="'+theimg+'" id="finished-image" style="position: absolute; top: -'+$('#y1').val()+'px; left: '+$('#x1').val()+'px;">'+
'</div></div><hr>').fadeIn(function() { $('#finished-image').addClass('img-responsive'); });
// Fade in form to allow user to finish adding details.
$('.form-finish').fadeIn();
// Fade in main form submit button to allow user to submit the completed form.
$('.panel-footer').fadeIn(); // Final Submit Button to Fade In
jcrop_api.destroy();
});

Using CSS to trim the image worked fine for desktops that were wider than the image itself but when responsively resizing the image it's almost impossible due to the always changing widths and heights of the image depending on the device.
Instead; I turned to JavaScript that actually trims the image to the width and height and the location wanted, set out by the Jcrop which then has no issue using img-responsive to resize the image to the mobile device.
function showPart(img, offsetTop, offsetLeft, width, height){
var src = img.src;
$(img).replaceWith("<canvas id='cnvs' class='img-responsive' style='max-width:100%;'></canvas>");
var canvas = document.getElementById('cnvs');
canvas.height = height;
canvas.width = width;
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
ctx.drawImage(this, offsetLeft, offsetTop, width, height, 0, 0, width, height);
};
img.src = src;
}
Original answer containing this snippet: https://stackoverflow.com/a/36436245/956106

When resizing video.js using API, fullscreen does not work

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);

Is possible to make a fullscreen image zoomable?

I try to put a image in a full screen, and also the image can be zoomable.
I use for the zoom this jquery plugin http://www.jacklmoore.com/wheelzoom/
and for the full full screen, all options described here
Full-screen responsive background image
In my tests, is possible make zoom into the image, but if resize the window, the image not resize and appear spaces between the borders.
I do not know if it's better to put the image in a div, and make this div fullscreen.

If you provide us the fiddle we could be able to do something else but one option seems to be changing the image size on windows resize:
$(window).resize(function() {
//in order to call the functions only when the resize is finished
//http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
clearTimeout(resizeId);
resizeId = setTimeout(doneResizing, 500);
});
function doneResizing(){
var windowsWidtdh = $(window).width();
var windowsHeight = $(window).height();
//setting your image dimensions
$('#yourImage').css('height', windowsHeight );
$('#yourImage').css('width', windowsWidtdh );
}

youtube video as web site background

is there a way to embedd youtube video as a background of a web page with html, css and javascript with the actual site content on top? how?
basically, it should be a video that auto plays, is muted (but the volume can be turned up by the visitor) and the site should work well being on top of it (the site is minimal so most of the video should be visible at all times). the site is minimal enough that no scroll bars would be visible by default in most browsers and the video should be 100% width and height.
examples? links?
tried Google but couldn't find it.
also it should work for videos not on youtube.
html5 and css3 preferred :)
I REALLY NEED A LIVE EXAMPLE SOMEWHERE (or as close to) because i tried it all (as available via google and failed)
also, related - there doesn't seem to be (as per my own research) any way of slowing down the play of youtube videos (for example: 24 times slower) - true / false?

You have probably found a solution by now but just in case you haven't...have you tried http://www.seanmccambridge.com/tubular/ ?

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
// Replace ID with the actual ID of your YouTube video
http://www.labnol.org/internet/youtube-video-background/27933/

you got this library as well:
http://florian-chapon.fr/dev/youtube-background/
the only thing you have to do, is include the js file, and put this script on your "body":
$(document).ready(function() {
ytbg("vQWlNALvbhE", 0, 17, 1);
});
As an explanation:
ytbg("video link", starttime, endtime, volume).

for completeness sake adding http://okfoc.us/okvideo/ here. Also does Vimeo.

There are two ways to answer this question:
Set the flash player's wmode to transparent, put it in an absolute div with a low z-index. Put the content in another absolute div with a higher z-index.
Don't do it. Seriously. Don't put a movie behind the site's main content. You are aliening your customer base, making the site hare to view and read, and violating about a dozen or two other guidelines in good site design. Why not put the video inside the flow of the document where it belongs instead?

Well you could absolute position the tag or the , use CSS to set the height and width. Use javascript to simulate clicking on the button. set the element zIndex to the background.

Hi, as tubular is quite suffisticated, i extracted the necessary code
for you.
html code:
<div id="player-container" style="overflow: hidden; position: absolute; width: 100%; height: 100%;">
<div id="player" style="position: absolute">
</div>
here comes the complete youtube API cover style stuff, extracted from
tubular. jquery is needed. Also the standard youtube html5 iframe api
code must be included - as given here:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
var ratio = 16 / 9;
window.onPlayerReady = function (e) {
resize();
}
$(window).on('resize', function () {
resize();
})
var resize = function () {
console.log("resize");
var heightcorrection = 0,
width = $(window).width(),
pWidth, // player width, to be defined
height = $(window).height() - heightcorrection,
pHeight, // player height, tbd
$videoPlayer = $('#player');
if (width / ratio < height) { // if new video height < window height (gap underneath)
pWidth = Math.ceil(height * ratio); // get new player width
$videoPlayer.width(pWidth).height(height).css({
left: (width - pWidth) / 2,
top: 0
}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / ratio); // get new player height
$videoPlayer.width(width).height(pHeight).css({
left: 0,
top: (height - pHeight) / 2
}); // player height is greater, offset top; reset left
}
}

How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

I've got a web application that loads some content from an external source to the dom via an ajax call, one of the things that comes back is a set of images (different sizes and aspect ratios) to be displayed in an profile photo section. I'd like for each of the images to be resized to fit within a 64px x 64px area and I'd like to maintain aspect ratio. I was able to do this in firefox, chrome, and safari, but I've no luck getting this to work in IE 7 or 8. The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load. Here's what works in the listed browsers:
$(window).load(function () {
$('.profileThumbnail').each(function (i) {
var divHeight = $(this).height();
var divWidth = $(this).width();
if (divHeight > divWidth) {
$(this).css('height', '64px');
$(this).css('width', 'auto');
}
else {
$(this).css('height', 'auto');
$(this).css('width', '64px');
}
divHeight = $(this).height();
var divParentHeight = $(this).parent().parent().height();
var divNewHeight = (divParentHeight - divHeight) / 2;
$(this).parent().css('top', divNewHeight);
divWidth = $(this).width();
var divParentWidth = $(this).parent().parent().width();
var divNewWidth = (divParentWidth - divWidth) / 2;
$(this).parent().css('left', divNewWidth);
});
});
I'm also trying to center (horizontally and vertically) them which is what the rest of that code does, but I think I've got all of that working if I can find a way to trigger this code after the image loads in IE.
keep in mind this needs to work both on the first visit (not cached) and subsequent visits (cached). I'm looking for a jquery, javascript, or css solution as I want to avoid the roundtrip/bandwidth for each image.

Have you tired to add a load event to the images yourself which triggers when the image is loaded? This is how image preloaders work.
var img = document.createElement("img");
img.onload = function(){ alert('loaded'); }
img.onerror = function(){ alert('error'); }
img.src = "foo.png";
You can add the onload to the image elements themselves if you are not doing the preload approach.

The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load.
Instead of setting an onload listener for the window, set an onload listener for the images you are loading remotely. Set the listener after you create the image object and before you insert it into the body. The listener can basically be all the stuff insife of the .each() in the code you posted,