We Keep Coding

How could i show video stream in larger view after clicking on smaller view using webrtc

How could i show video stream in larger view after clicking on smaller view using webrtc .If somebody has the code , please share it. Basically i have to maximize one video stream in all the video after clicking on it.I tried webrtc functions but it is not solved.

The magic of CSS. Assuming your video element is accessible as "video" to JavaScript try this:
video.onclick = function () {
video.style.width = video.videoWidth + 'px';
video.style.height = video.videoHeight + 'px';
};

Get Width and Height of HTML5 Video using JavaScript?

I've tried several answers found here.
This code works in Firefox and outputs the right size, but not in Chrome or IE.
Mainly I am trying to get just the width.
Example
I have the output the width under the video using 3 examples.
https://jsfiddle.net/a8a1o8k2/
JavaScript
https://stackoverflow.com/a/4129189/6806643
var vid1 = document.getElementById("video");
vid1.videoHeight; // returns the intrinsic height of the video
vid1.videoWidth; // returns the intrinsic width of the video
returns 0
https://stackoverflow.com/a/9333276/6806643
var vid2 = document.getElementById("video");
vid2.addEventListener( "loadedmetadata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
}, false );
returns 0
https://stackoverflow.com/a/16461041/6806643
var vid3 = document.getElementById("video");
var videotag_width = vid3.offsetWidth;
var videotag_height = vid3.offsetHeight;
sometimes returns the correct value
sometimes returns 300 (default player size if no video source)

Edit: improved solution after I have actually read the crossbrowser issue.
The solution below should work on both Chrome and Firefox. The issue is that Firefox treats readyState differently than Chrome.
var vid2 = document.getElementById("video");
vid2.addEventListener("loadedmetadata", getmetadata);
if (vid2.readyState >= 2) {
getmetadata(vid2);
}
function getmetadata(){
document.getElementById('output2').innerHTML = "Test 2: " + vid2.videoWidth;
}
Updated JSFiddle

If you are trying to define the size of your video with java script im not sure what you are actually trying to do, althought it seems to me like you just want it to be customizable like this example.
If we presume the video was embedded the code below might do the trick
// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
You can also refer to this page how it actually works and there is also an CSS and HTML example of dynamic video rescaling as well:
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Why doesn't $(window).resize() work for me?

I'm working on a project and my goal is to make a video player with an embeded iframe be responsive when viewing on different screen sizes. I figure the best way to do it is using resize function. However, every time in the many different configurations I've tried to use the resize function it does not work. I expect the text to log to the console after every time the screen is resized, but instead it is not logged at all or only once when the screen is loaded and never again.
Why is this happening.
I know my jQuery is right because I log other things in different functions (like the width and height).
window.onload = function() {
$(document).ready(function(){
console.log(' <-GoT Here. You FOOL!');
var iframe = $('iframe');
var videoplayerW = iframe.width(); //640
var videoplayerH = $('iframe').height(); //150
console.log(videoplayerW, videoplayerH, ' <-This The width and height of iframe.'); //560 and 315
var ytplayer = $('#ytplayer');
console.log(ytplayer.width(), ytplayer.height(), ' <-This is the ytplayer demonsions'); //undefined
iframe.each(function(){
$(this)
.attr('style', this.height, this.width)
.removeAttr('height')
.removeAttr('width');
});
console.log(iframe.width());
});
}
$(document).ready(function(){
$(window).resize(function(){
console.log('Should have a bunch of numbers');
});
});

jQuery Fluid Videos - in Wordpress

I'm using the script form this website.
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
How can I take this jQuery script and modify with Wordpress? I'm putting it inside of a script tag at the bottom of my page on a document ready. In wordpress it says to use jQuery instead of $. How do I call my variables then as well as define them? Where does $fluidEl come from?

implementing image gallery that lazy loads images of unknown size on scroll and positions them optimally

I need to implement an image gallery with the following spec:
images need to have a max height and width. they keep their aspect ratio within these bounds.
based on the final size of the images after the max size constraints, order them on the page in a way that reduces empty blank spaces.
as the container scrolls down, load more images.
libraries I have researched such as masonry and this lay load lib
all expect width and height to be known ahead of time.
It seems that I may need to resort to loading the images in an invisible state in order to get the width and height params before positioning them on the page.
this will help with the 'masonry' aspect, but contradict the lazy load mechanism.
I would appreciate any pointers in the right direction.

I'm using Masonry right now and I think that it fits to your needs. I have different width&height images and I load with a fixed max-width (with a fixed width or a relative to the page one) and then, the layouts reorders to avoid blank spaces and keep aspect ratio of the images. When I reach the bottom of the page, I ('manually') load more items. This is my code
//Load the first page
loadMore(1);
function loadMore(page){
var div = "";
var html = "";
var item_num = 1 + ((page-1)*10);
$('.loader').show();
$('#container').hide();
$.post( "loadMore.php", {'page':page }, function( data ) {
data=JSON.parse(data);
$.each(data, function (key,value) {
//here create the div with the data
html = html + div;
item_num++;
});
$("#container").append(html).each(function(){
$('#container').masonry().masonry('reloadItems');
});
var $container = $('#container');
$container.imagesLoaded(function(){
$('#container').masonry();
});
$('.loader').fadeOut('fast',function(){
$(this).remove().delay( 1500 );
});
$('#container').show();
});
}
//On bottom page, load more images
$(window).scroll(function () {
if (ready && $(document).height() <= $(window).scrollTop() + $(window).height()) {
ready = false; //Set the flag here
setTimeout(function(){
loadMore(page);
page++;
},1000);
ready = true; //Set the flag here
}
});
You can check the result at http://pintevent.com (is a beta page)
Then, is easy to add LazyLoad to all images, here is a working example:
http://jsfiddle.net/nathando/s3KPn/4/ (extracted from a similar question: Combining LazyLoad and Jquery Masonry )
Also, if it not works for you, here's a bunch of jquery LazyLoad libraries for galleries you could check: http://www.jqueryrain.com/demo/jquery-lazy-load/
Hope it helps to you!