Auto-Scale Embeded Youtube Videos (Responsive)

[videod]

Hello,

I am in the process of upgrading from OSC 2.3.3 to 2.3.4 Bootstrap Edge.  So far everything is going well and I just want to thank everyone for their contribution for a really nice responsive upgrade.

Currently I am trying to get my embedded youtube videos to be responsive .. auto scale/auto resize. 
    Unfortunately it breaks a couple of things:
    1. The Navbar pulldowns (I tried to contain it to the pages that have Youtube videos but it breaks those pages as well)
    2. Kills Youtube iframe links to Youtube subscription channel.
    
I used the 2 script links  below instead of putting the code on my site.  Which would probably be a better idea.  The instructions say to put the links in the header. Which I did, and then moved to the engilsh.php page which just breaks Navbar on the home page, and also kills the iframe link to Youtube subscription page. The scaling does work wonderfully by the way.
    
     Any thoughts would be appreciated.

     Thanks - Dave
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Script links and Code are from http://www.skipser.com/p/2/p/auto-resize-youtube-videos-in-responsive-layout.html - which looks like this:

REQUIREMENT: This javascript based solution requires Jquery. So please add the following lines in your header first.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    
    1. Include a javascript having the magic function in your pages. You can add the following lines in your page header.

    <script src="https://cdn.rawgit.com/skipser/youtube-autoresize/master/youtube-autoresizer.js"></script>

2. If you are not comfortable adding yet another javascript, you could just copy the content to one of your own .js files. Here's the code you need to copy-

    /*
     * Youtube video auto-resizer script
     * Created by Skipser.com
    */
     
    $(document).ready(function() {
      if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
        YOUTUBE_VIDEO_MARGIN=5;
      }
      $('iframe').each(function(index,item) {
        if($(item).attr('src').match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i)) {
          var w=$(item).attr('width');
          var h=$(item).attr('height');
          var ar = h/w*100;
          ar=ar.toFixed(2);
          //Style iframe    
          $(item).css('position','absolute');
          $(item).css('top','0');
          $(item).css('left','0');    
          $(item).css('width','100%');
          $(item).css('height','100%');
          $(item).css('max-width',w+'px');
          $(item).css('max-height', h+'px');        
          $(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
          $(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
        }
      });
    });

If you want to add some margin on the sides of your video, just add the following line immediately above the javascript line or the code and replace "10" with the margin you need.

    YOUTUBE_VIDEO_MARGIN=10
    
    
    Demo site: http://www.skipser.com/test/googlecode/youtube-autoresize/test.html
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------  
   
    Note: I added the fix found in the comments from the webpage that contained the code. - Dave

 

[videod]

Resizing working great now.  I figured out that the first script was pointing to an old version of google jquery.   So I updated the link and now it doesn't break the navbar but still removes my youtube link...  That could be due to the code in the second link?

 

I put the follwing lines into my catalog/includes/header.php file (at the very end):

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/skipser/youtube-autoresize/master/youtube-autoresizer.js"></script>

 

Pros:

It makes all pages that have embedded youtube videos resize automatically on smaller screens.

 

Cons:

I would rather have all of the code on my site to help load faster and not have dependencies from other sites...

[videod]

Last post on this.  I got everything working, including pointing to the jquery file on MY website *face palm*.  So I removed the link pointing to google, and pointed it to catalog/ext/jquery/jquery-1.11.1.min.js on my hosted site.  I also created the .js file and put it in the same path - catalog/ext/jquery/youtube-autoresizer.js.

 

The 2 scripts that go in the header (bottom line of header works for me) go like this:

 

<script src="http://yourdomain/ext/jquery/1.11.1/jquery.min.js"></script>
<script src="http://yourdomain/ext/jquery/youtube-autoresizer.js"></script>

 

and the code for the  youtube-autoresizer.js file that worked for me looks like this:

/*
 * Youtube video auto-resizer script
 * Created by Skipser.com
*/

$(document).ready(function() {
	if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
		YOUTUBE_VIDEO_MARGIN=5;
	}
	$('iframe').each(function(index,item) {
		if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
			var w=$(item).attr('width');
			var h=$(item).attr('height');
			var ar = h/w*100;
			ar=ar.toFixed(2);
			//Style iframe		
			$(item).css('position','absolute');
			$(item).css('top','0');
			$(item).css('left','0');		
			$(item).css('width','100%');
			$(item).css('height','100%');
			$(item).css('max-width',w+'px');
			$(item).css('max-height', h+'px');				
			$(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
			$(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
		}
	});
});

I don't know if this follows the OSC Bootstrap guidelines but it works for now.  Any thoughts or improvements are welcomed.

 

Cheers!

 

Dave