News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

[Tip/Trick] Make your YouTube posts responsive

Started by Mick., July 18, 2013, 06:58:26 PM

Previous topic - Next topic

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:

</body></html>';
}


Add before:

      <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:


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:

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:

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.


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.

<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-

#4
Quote from: Antechinus on July 18, 2013, 07:44:36 PM
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.

<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.

Advertisement: