[Tip/Trick] Make your YouTube posts responsive

[Mick.]

Want to make sure that your embedded YouTube videos look good on a mobile device? Looking to make your embedded YouTube video responsive? With jQuery and a small bit of CSS, we can make this work. First, i've been using NAO's YouTube BBCode for ages. It also works for SMF 2.0.4 even tho it looks out-dated.

We want to download this JQuery, in the form of a plugin called FitVids, https://github.com/davatron5000/FitVids.js developed by Chris Coiyer, Dave Rupert, and others.

Demo: [VIDEO] How to use Filezilla FTP client - SMF 2.0.x Modifications - idesign360


1. Upload the FitVids.js-master folder to your SMF root.
2. Open your theme's index.template.php and find:

Code Select Expand


</body></html>';
}


Add before:

Code Select Expand


      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script type="text/javascript" src="/FitVids.js-master/jquery.fitvids.js"></script>
      <script type="text/javascript">
        $("#wrapper").fitVids();
      });
      </script>


Open /Sources/Subs.php and find:

Code Select Expand



array(
'tag' => 'youtube',
'type' => 'unparsed_content',
'validate' => create_function('&$tag, &$data, $disabled', '
// Access globals
global $txt, $context;
// Determine which variable is the link
$link = !is_array($data) ? $data : $data[0] ;
// Remove linebreaks & trim
$link = trim(strtr($link, array(\'<br />\' => \'\')));
// Parse the ID of video or playlist safely
if  (preg_match(\'~^(?:http://((?:www|au|br|ca|es|fr|de|hk|ie|in|il|it|jp|kr|mx|nl|nz|pl|ru|tw|uk)\.)?youtube\.com/(?:[^"]*?)(?:(?:video_)?id=|(?:v|p)(?:/|=)))?([0-9a-f]{16}|[0-9a-z-_]{11})~i\'.($context[\'utf8\'] ? \'u\' : \'\'), $link, $matches))
{
// Localised youtube site?  If not use www.
$site = !empty($matches[1]) ? strtolower($matches[1]) : \'www.\' ;
// Video or Playlist ID?
$type = strlen($matches[2]) == 11 ? 1 : 0 ;
// Set sizes Or Normalise sizes (If sizes are <100 or > 780)
if(!is_array($data) || ($data[1] > 780 || $data[1] < 100 || $data[2] > 780 || $data[2] < 100))
$data = array(0, 425, ($type ? 350 : 355));
// Set ID in the array
$data[0] = $matches[2];
// Tidy up
unset($matches, $link);

// Set the Content (With conditions on disabled types of BBCode)
if (isset($disabled[\'url\']) && isset($disabled[\'youtube\']))
// Youtube & Url bbc disabled? (eg Printer friendly pages)
$tag[\'content\'] = "http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0];
elseif(isset($disabled[\'youtube\']))
// Only Youtube is disabled, So make an active link
$tag[\'content\'] = "<a href=\"http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."\" target=\"_blank\">http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."</a>";
else
{
// Empty content
$tag[\'content\'] = \'\';

// Build the <object> (Non-Mac IE Only)
if($context[\'browser\'][\'is_ie\'] && !$context[\'browser\'][\'is_mac_ie\'])
$tag[\'content\'] = \'<object width="\'.$data[1].\'px" height="\'.$data[2].\'px">\'
.\'<param name="movie" value="http://www.youtube.com/\'.($type ? "v" : "p").\'/\'.$data[0].\'&amp;rel=1&amp;fs=1" />\'
.\'<param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" />\'
.\'<param name="allowScriptAccess" value="never" />\';
// Build the <embed>
$tag[\'content\'] .= \'<embed src="http://www.youtube.com/\'.($type ? "v" : "p").\'/\'.$data[0].\'&amp;rel=1&amp;fs=1" \'
.\'type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="never" \'
.\'wmode="transparent" width="\'.$data[1].\'px" height="\'.$data[2].\'px">\';
// Build the <noembed>
$tag[\'content\'] .= "<noembed><a href=\"http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p" ) ."=". $data[0]."\" target=\"_blank\">http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."</a></noembed>";
// Closing <embed>
$tag[\'content\'] .= \'</embed>\';
// Close the <object> (Non-Mac IE Only)
if($context[\'browser\'][\'is_ie\'] && !$context[\'browser\'][\'is_mac_ie\'])
$tag[\'content\'] .= \'</object>\';
}
}
else
// Invalid link
$tag[\'content\'] = $txt[\'youtube_invalid\'];
'),
'disabled_content' => '$1',
            ),
array(
'tag' => 'youtube',
'type' => 'unparsed_commas_content',
'test' => '\d+,\d+\]',
'validate' => create_function('&$tag, &$data, $disabled', '
// Access globals
global $txt, $context;
// Determine which variable is the link
$link = !is_array($data) ? $data : $data[0] ;
// Remove linebreaks & trim
$link = trim(strtr($link, array(\'<br />\' => \'\')));
// Parse the ID of video or playlist safely
if  (preg_match(\'~^(?:http://((?:www|au|br|ca|es|fr|de|hk|ie|in|il|it|jp|kr|mx|nl|nz|pl|ru|tw|uk)\.)?youtube\.com/(?:[^"]*?)(?:(?:video_)?id=|(?:v|p)(?:/|=)))?([0-9a-f]{16}|[0-9a-z-_]{11})~i\'.($context[\'utf8\'] ? \'u\' : \'\'), $link, $matches))
{
// Localised youtube site?  If not use www.
$site = !empty($matches[1]) ? strtolower($matches[1]) : \'www.\' ;
// Video or Playlist ID?
$type = strlen($matches[2]) == 11 ? 1 : 0 ;
// Set sizes Or Normalise sizes (If sizes are <100 or > 780)
if(!is_array($data) || ($data[1] > 780 || $data[1] < 100 || $data[2] > 780 || $data[2] < 100))
$data = array(0, 425, ($type ? 350 : 355));
// Set ID in the array
$data[0] = $matches[2];
// Tidy up
unset($matches, $link);

// Set the Content (With conditions on disabled types of BBCode)
if (isset($disabled[\'url\']) && isset($disabled[\'youtube\']))
// Youtube & Url bbc disabled? (eg Printer friendly pages)
$tag[\'content\'] = "http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0];
elseif(isset($disabled[\'youtube\']))
// Only Youtube is disabled, So make an active link
$tag[\'content\'] = "<a href=\"http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."\" target=\"_blank\">http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."</a>";
else
{
// Empty content
$tag[\'content\'] = \'\';

// Build the <object> (Non-Mac IE Only)
if($context[\'browser\'][\'is_ie\'] && !$context[\'browser\'][\'is_mac_ie\'])
$tag[\'content\'] = \'<object width="\'.$data[1].\'px" height="\'.$data[2].\'px">\'
.\'<param name="movie" value="http://www.youtube.com/\'.($type ? "v" : "p").\'/\'.$data[0].\'&amp;rel=1&amp;fs=1" />\'
.\'<param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" />\'
.\'<param name="allowScriptAccess" value="never" />\';
// Build the <embed>
$tag[\'content\'] .= \'<embed src="http://www.youtube.com/\'.($type ? "v" : "p").\'/\'.$data[0].\'&amp;rel=1&amp;fs=1" \'
.\'type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="never" \'
.\'wmode="transparent" width="\'.$data[1].\'px" height="\'.$data[2].\'px">\';
// Build the <noembed>
$tag[\'content\'] .= "<noembed><a href=\"http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p" ) ."=". $data[0]."\" target=\"_blank\">http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."</a></noembed>";
// Closing <embed>
$tag[\'content\'] .= \'</embed>\';
// Close the <object> (Non-Mac IE Only)
if($context[\'browser\'][\'is_ie\'] && !$context[\'browser\'][\'is_mac_ie\'])
$tag[\'content\'] .= \'</object>\';
}
}
else
// Invalid link
$tag[\'content\'] = $txt[\'youtube_invalid\'];
'),
'disabled_content' => '$1',
),


Replace with:

Code Select Expand


array(
'tag' => 'youtube',
'type' => 'unparsed_content',
'validate' => create_function('&$tag, &$data, $disabled', '
// Access globals
global $txt, $context;

// Determine which variable is the link
$link = !is_array($data) ? $data : $data[0] ;

// Remove linebreaks & trim
$link = trim(strtr($link, array(\'<br />\' => \'\')));

// Parse the ID of video or playlist safely
if  (preg_match(\'~^(?:http://((?:www|au|br|ca|es|fr|de|hk|ie|in|il|it|jp|kr|mx|nl|nz|pl|ru|tw|uk)\.)?youtube\.com/(?:[^"]*?)(?:(?:video_)?id=|(?:v|p)(?:/|=)))?([0-9a-f]{16}|[0-9a-z-_]{11})~i\'.($context[\'utf8\'] ? \'u\' : \'\'), $link, $matches))
{
// Localised youtube site?  If not use www.
$site = !empty($matches[1]) ? strtolower($matches[1]) : \'www.\' ;

// Video or Playlist ID?
$type = strlen($matches[2]) == 11 ? 1 : 0 ;

// Set sizes Or Normalise sizes (If sizes are <100 or > 780)
if(!is_array($data) || ($data[1] > 780 || $data[1] < 100 || $data[2] > 780 || $data[2] < 100))
$data = array(0, 425, ($type ? 450 : 355));

// Set ID in the array
$data[0] = $matches[2];

// Tidy up
unset($matches, $link);

// Set the Content (With conditions on disabled types of BBCode)
if (isset($disabled[\'url\']) && isset($disabled[\'youtube\']))

// Youtube & Url bbc disabled? (eg Printer friendly pages)
$tag[\'content\'] = "http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0];
elseif(isset($disabled[\'youtube\']))

// Only Youtube is disabled, So make an active link
$tag[\'content\'] = "<a href=\"http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."\" target=\"_blank\">http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."</a>";
else
{
// Empty content
$tag[\'content\'] = \'\';

// Build the <object> (Non-Mac IE Only)
if($context[\'browser\'][\'is_ie\'] && !$context[\'browser\'][\'is_mac_ie\'])
$tag[\'content\'] = \'<object width="\'.$data[1].\'%" height="\'.$data[2].\'px">\'
.\'<param name="movie" value="http://www.youtube.com/\'.($type ? "v" : "p").\'/\'.$data[0].\'&amp;rel=1&amp;fs=1" />\'
.\'<param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" />\'
.\'<param name="allowScriptAccess" value="never" />\';

// Build the <embed>
$tag[\'content\'] .= \'<div class="vendor"><embed src="http://www.youtube.com/\'.($type ? "v" : "p").\'/\'.$data[0].\'&amp;rel=1&amp;fs=1" \'
.\'type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="never" \'
.\'wmode="transparent" width="\'.$data[1].\'%" height="\'.$data[2].\'px"></div>\';

// Build the <noembed>
$tag[\'content\'] .= "<noembed><a href=\"http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p" ) ."=". $data[0]."\" target=\"_blank\">http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."</a></noembed>";

// Closing <embed>
$tag[\'content\'] .= \'</embed>\';

// Close the <object> (Non-Mac IE Only)
if($context[\'browser\'][\'is_ie\'] && !$context[\'browser\'][\'is_mac_ie\'])
$tag[\'content\'] .= \'</object>\';
}
}
else
// Invalid link
$tag[\'content\'] = $txt[\'youtube_invalid\'];
'),
'disabled_content' => '$1',
                         ),

array(
'tag' => 'youtube',
'type' => 'unparsed_commas_content',
'test' => '\d+,\d+\]',
'validate' => create_function('&$tag, &$data, $disabled', '
// Access globals
global $txt, $context;
// Determine which variable is the link
$link = !is_array($data) ? $data : $data[0] ;
// Remove linebreaks & trim
$link = trim(strtr($link, array(\'<br />\' => \'\')));
// Parse the ID of video or playlist safely
if  (preg_match(\'~^(?:http://((?:www|au|br|ca|es|fr|de|hk|ie|in|il|it|jp|kr|mx|nl|nz|pl|ru|tw|uk)\.)?youtube\.com/(?:[^"]*?)(?:(?:video_)?id=|(?:v|p)(?:/|=)))?([0-9a-f]{16}|[0-9a-z-_]{11})~i\'.($context[\'utf8\'] ? \'u\' : \'\'), $link, $matches))
{
// Localised youtube site?  If not use www.
$site = !empty($matches[1]) ? strtolower($matches[1]) : \'www.\' ;
// Video or Playlist ID?
$type = strlen($matches[2]) == 11 ? 1 : 0 ;
// Set sizes Or Normalise sizes (If sizes are <100 or > 780)
if(!is_array($data) || ($data[1] > 780 || $data[1] < 100 || $data[2] > 780 || $data[2] < 100))
$data = array(0, 425, ($type ? 450 : 355));
// Set ID in the array
$data[0] = $matches[2];
// Tidy up
unset($matches, $link);

// Set the Content (With conditions on disabled types of BBCode)
if (isset($disabled[\'url\']) && isset($disabled[\'youtube\']))
// Youtube & Url bbc disabled? (eg Printer friendly pages)
$tag[\'content\'] = "http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0];
elseif(isset($disabled[\'youtube\']))
// Only Youtube is disabled, So make an active link
$tag[\'content\'] = "<a href=\"http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."\" target=\"_blank\">http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."</a>";
else
{
// Empty content
$tag[\'content\'] = \'\';

// Build the <object> (Non-Mac IE Only)
if($context[\'browser\'][\'is_ie\'] && !$context[\'browser\'][\'is_mac_ie\'])
$tag[\'content\'] = \'<object width="\'.$data[1].\'%" height="\'.$data[2].\'px">\'
.\'<param name="movie" value="http://www.youtube.com/\'.($type ? "v" : "p").\'/\'.$data[0].\'&amp;rel=1&amp;fs=1" />\'
.\'<param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" />\'
.\'<param name="allowScriptAccess" value="never" />\';
// Build the <embed>
$tag[\'content\'] .= \'<div class="vendor"><embed src="http://www.youtube.com/\'.($type ? "v" : "p").\'/\'.$data[0].\'&amp;rel=1&amp;fs=1" \'
.\'type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="never" \'
.\'wmode="transparent" width="\'.$data[1].\'%" height="\'.$data[2].\'px"></div>\';
// Build the <noembed>
$tag[\'content\'] .= "<noembed><a href=\"http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p" ) ."=". $data[0]."\" target=\"_blank\">http://". $site ."youtube.com/". ($type ? "watch?v" : "view_play_list?p") ."=". $data[0]."</a></noembed>";
// Closing <embed>
$tag[\'content\'] .= \'</embed>\';
// Close the <object> (Non-Mac IE Only)
if($context[\'browser\'][\'is_ie\'] && !$context[\'browser\'][\'is_mac_ie\'])
$tag[\'content\'] .= \'</object>\';
}
}
else
// Invalid link
$tag[\'content\'] = $txt[\'youtube_invalid\'];
'),
'disabled_content' => '$1',
),


Open your theme's /css/index.css and at the very end add:

Code Select Expand


iframe, embed, object {
        max-width: 100%;
}

.vendor {
        padding: 2%;
        background: #d1eed1;
        margin-bottom: 2em;
}


[Antechinus]

I wrote a pure css fix for embedded vids. No jQuery required. Not sure why you would need jQuery for this, since it's the css that sets the width limit.

[Mick.]

I am a jquery junky.

[Antechinus]

Why choose a more complex and bloated solution, when you can use a simple and less bloated one, to get exactly the same result?

All you need to do is put a css resize on the embed tag. You can do this either inline, or via class. Whatever. Since the custom embed code I was using was done in a script.js anyway, I put the css inline.

Code Select Expand

<embed width="640px" height="385px" style="max-width: 98%; max-height: auto;" allowscriptaccess="never"\ allowfullscreen="true" quality="high" wmode="transparent" src="{src}"\ type="application/x-shockwave-flash"/>';

That works. No extra plugins needed.

[-Captain Ghost-]

Why choose a more complex and bloated solution, when you can use a simple and less bloated one, to get exactly the same result?

All you need to do is put a css resize on the embed tag. You can do this either inline, or via class. Whatever. Since the custom embed code I was using was done in a script.js anyway, I put the css inline.

Code Select Expand

<embed width="640px" height="385px" style="max-width: 98%; max-height: auto;" allowscriptaccess="never"\ allowfullscreen="true" quality="high" wmode="transparent" src="{src}"\ type="application/x-shockwave-flash"/>';

That works. No extra plugins needed.

Can you please give proper steps to achieve this with css
I am using Ohara Youtube Embed by Suki

Thanks

[Antechinus]

That is the proper steps. You just need to put a max-width and max-height on the embed tag. I have never looked at that mod so have no idea how it is coded, but I'm quite sure Suki is capable of telling you how to tweak it.