Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.

Make your YouTube posts responsive

Mick in Tutorials
Jul 18, 2013

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

Assuming you're using idesignSMF themes...

1. Upload the FitVids.js-master folder to your SMF root.
2. Open your theme's index.template.php and find:
Code: [Select]
</body></html>';
}

Add before:
Code: [Select]
      <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]

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]
			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]
iframe, embed, object {
        max-width: 100%;
}

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

Tagged with:

Share This Post

Mick

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.

    


0 Comments



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up