BlueOwlCreative » Topic: Error with Video in Tabs element

Error with Video in Tabs element

javierdealfonso — Fri, 04 Apr 2014 13:23:32 +0000

Hi BlueOwl,

I enter the following code:
[tabs tab1="MASSPHONING - The Tool" tab2="MASSPHONING - The Concept"][tab id=1][/tab][tab id=2][/tab][/tabs]

WordPress renders:

But when the page is loaded, the result is:

Which renders the video embedded in the second tab smaller than the one embedded in the first tab.

Could you give a hand here?

Thanks in advance,

Javier

Reply To: Error with Video in Tabs element

javierdealfonso — Fri, 04 Apr 2014 20:25:52 +0000

Hi again,

If we use the Vimeo shortcode…

[tabs tab1="MASSPHONING - The Tool" tab2="MASSPHONING - The Concept"][tab id=1][vimeo id="76261768" width="1280" height="720"][/tab][tab id=2][vimeo id="76262044" width="1280" height="720"][/tab][/tabs]

… then the video in the second tab is not even shown, as you can see at http://www.massphoning.com/0-tests.

Regards,

Javier

Reply To: Error with Video in Tabs element

javierdealfonso — Sat, 05 Apr 2014 08:39:07 +0000

Hi BlueOwl,

Just in case this helps to find the problem: when using the Vimeo shortcode, if you resize the browser the second video suddenly appears, but then the first one disappears. If you resize, the empty tab gets the video content, but the other tab gets empty.

Regards,

Javier

Reply To: Error with Video in Tabs element

BlueOwl — Sat, 05 Apr 2014 17:15:23 +0000

Hi Javier,

You are totally right, thanks for the extensive info as well. The videos are made responsive via a JS bit of code that basically forces their width to be inherited by a video’s parent width, that way on all screens resolutions we know a video would fit perfectly. The problem with a video in a tab comes from the fact that an inactive tab has a width of 0, thus on page load the video also inherits that width, when the screen is resized the video inherits the parent width and the active tab’s video gets shown and the inactive tabs’ videos are shrunk to 0.
We’ll add some code to the tab activation script that will resize the videos one more time a tab gets clicked, that will ensure the videos are always shown, provided you want the responsive full-width parent videos. If you want fixed size videos (for example you want to set their width and height explicitly in the tabs and don’t want them responsively resizing at all times) we could simply remove the reponsiveness of the videos in the tabs. Let me know which one you want and I will give you the code.

Reply To: Error with Video in Tabs element

javierdealfonso — Sat, 05 Apr 2014 18:03:30 +0000

I see, the responsive code is the one we need.

Thank you for your prompt answer,

Javier

Reply To: Error with Video in Tabs element

BlueOwl — Sat, 05 Apr 2014 20:13:02 +0000

Ok, here you go. Edit your JS/aqua.common.js, find this line:

jQuery(jQuery(this).attr('href')).show();

and right after it add this:

var $allVideos = jQuery(jQuery(this).attr('href')).find("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed").not('.rev_slider iframe');
		
           $allVideos.each(function() {
		if(jQuery(this).attr('data-aspectRatio')==undefined){
			Query(this).attr('data-aspectRatio', this.height / this.width)
		}
		jQuery(this).removeAttr('height').removeAttr('width');
			
    		var nWidth = jQuery(this).parent().width();
    	    	var $el = jQuery(this);
    	    	$el
    	    	    .width(nWidth)
    	    	    .height(nWidth * $el.attr('data-aspectRatio'));
    	    	  
    	    });

This will make sure the videos are resized upon clicking on the TABs.

Reply To: Error with Video in Tabs element

javierdealfonso — Sat, 05 Apr 2014 21:22:15 +0000

I’m afraid I can’t find that line in the 2.0 version of aqua.common.js. There is this line: jQuery(this).show();

If I replace that line and add your code like so:

	jQuery(jQuery(this).attr('href')).show();

var $allVideos = jQuery(jQuery(this).attr('href')).find("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed").not('.rev_slider iframe');
		
           $allVideos.each(function() {
		if(jQuery(this).attr('data-aspectRatio')==undefined){
			Query(this).attr('data-aspectRatio', this.height / this.width)
		}
		jQuery(this).removeAttr('height').removeAttr('width');
			
    		var nWidth = jQuery(this).parent().width();
    	    	var $el = jQuery(this);
    	    	$el
    	    	    .width(nWidth)
    	    	    .height(nWidth * $el.attr('data-aspectRatio'));
    	    	  
    	    });

Then the videos appear on both tabs, but there is no responsiveness at all, as you can see at http://www.massphoning.com/0-tests.

Regards,

Javier

Reply To: Error with Video in Tabs element

BlueOwl — Sun, 06 Apr 2014 14:32:06 +0000

Sorry the line in question was:

jQuery(jQuery(this).attr('href')).fadeIn();

You don’t need to replace it, just add the code after it.

Reply To: Error with Video in Tabs element

javierdealfonso — Sun, 06 Apr 2014 14:47:10 +0000

Still no responsiveness I’m afraid, and the page jumps when clicking the tabs, as you can see at http://www.massphoning.com/0-tests.
This is the whole code block:

/* TABS */
jQuery.fn.tabs = function() {
	var selector = this;
	
	this.each(function() {
		var obj = jQuery(this); 
		
		jQuery(obj.attr('href')).hide();
		
		jQuery(obj).click(function() {

			jQuery(obj).siblings().removeClass('selected');
			jQuery(obj.attr('href')).siblings('.tab-content').hide();
			
			jQuery(this).addClass('selected');
			
			jQuery(jQuery(this).attr('href')).fadeIn();
			var $allVideos = jQuery(jQuery(this).attr('href')).find("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed").not('.rev_slider iframe');
		
           $allVideos.each(function() {
		if(jQuery(this).attr('data-aspectRatio')==undefined){
			Query(this).attr('data-aspectRatio', this.height / this.width)
		}
		jQuery(this).removeAttr('height').removeAttr('width');
			
    		var nWidth = jQuery(this).parent().width();
    	    	var $el = jQuery(this);
    	    	$el
    	    	    .width(nWidth)
    	    	    .height(nWidth * $el.attr('data-aspectRatio'));
    	    	  
    	    });
			return false;
		});
	});

	jQuery(this).show();
	jQuery(this).parent().children('a:first-child').click();
};

The embedded videos further down the page have also lost their responsiveness.

Regards,
Javier

Reply To: Error with Video in Tabs element

BlueOwl — Sun, 06 Apr 2014 19:58:43 +0000

Ok, try mine:


/* TABS */
jQuery.fn.tabs = function() {
	var selector = this;
	
	this.each(function() {
		var obj = jQuery(this); 
		
		jQuery(obj.attr('href')).hide();
		
		jQuery(obj).click(function() {

			jQuery(obj).siblings().removeClass('selected');
			jQuery(obj.attr('href')).siblings('.tab-content').hide();
			
			jQuery(this).addClass('selected');
			
			jQuery(jQuery(this).attr('href')).show();
			var $allVideos = jQuery(jQuery(this).attr('href')).find("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed").not('.rev_slider iframe');
			
			$allVideos.each(function() {
  				
				
				if(jQuery(this).attr('data-aspectRatio')==undefined){
					jQuery(this).attr('data-aspectRatio', this.height / this.width)
				}
				jQuery(this).removeAttr('height').removeAttr('width');
			
    		    var nWidth = jQuery(this).parent().width();
    	    	var $el = jQuery(this);
    	    	$el
    	    	    .width(nWidth)
    	    	    .height(nWidth * $el.attr('data-aspectRatio'));
    	    	  
    	    });
			
			
			return false;
		});
	});

	jQuery(this).show();
	jQuery(this).parent().children('a:first-child').click();
};