1
xd9527
hack youtube for html5 & bootstrap3 RWD
  • 2016/1/14 4:06

  • xd9527

  • Just popping in

  • Posts: 8

  • Since: 2016/1/13


Youtube have many new update ,
so i'm try hack this , for html5 and RWD...

hack point
1. compatible https
2. compatible long url and short url
3. of cause html5 , no flash
4. for bootstrap3 responsive embed , 16:9 and 4:3 and RWD
5 .mobile can full screen

just edit 2 files
\class\textsanitizer\youtube\youtube.php
\language\english\formdhtmltextarea.php


step1. edit \class\textsanitizer\youtube\youtube.php

old default height and width
var text2 prompt(enterFlashWidthPhrase"425");
var 
text3 prompt(enterFlashHeightPhrase"350");


change to 16:9
var text2 prompt(enterFlashWidthPhrase"16");
var 
text3 prompt(enterFlashHeightPhrase"9");


--

old only long url
if (!preg_match("/^http://(www.)?youtube.com/watch?v=(.*)/i"$url$matches)) {
    
trigger_error("Not matched: {$url} {$width} {$height}"E_USER_WARNING);
 
    return 
"";
 }
$src "http://www.youtube.com/v/" $matches[2];


change to compatible long url and short url , (i'm code beginner, so stupid code)
if (preg_match("/^http[s]?://(www.)?youtu.be/(.*)/i"$url$matches) ) { }
elseif (
preg_match("/^http[s]?://(www.)?youtube.com/watch?v=(.*)/i"$url$matches)) { }
else{
  
trigger_error("Not matched: {$url} {$width} {$height}"E_USER_WARNING);
  return 
"";
  }
 
$src "http://www.youtube.com/embed/" $matches[2];


--

old for flash object
$code "<object width='{$width}' height='{$height}'><param name='movie' value='{$src}'></param>" .
        
"<param name='wmode' value='transparent'></param>" .
        
"<embed src='{$src}' type='application/x-shockwave-flash' wmode='transparent' width='425' height='350'></embed>" .
        
"</object>";


change to bootstrap3 RWD embed-responsive 16by9 and 4by3
$code "<div class='embed-responsive embed-responsive-{$width}by{$height}'>" .
        
"<iframe frameborder='0' class='embed-responsive-item' src='{$src}?controls=1&showinfo=0&rel=0&disablekb=1' allowfullscreen></iframe></div>";


--

step2. edit language \language\english\formdhtmltextarea.php
define('_XOOPS_FORM_ALT_ENTERHEIGHT','(Video 16:9 or 4:3) input Height 9 or 3 :');
define('_XOOPS_FORM_ALT_ENTERWIDTH','(Video 16:9 or 4:3) input Width 16 or 4 :');


done!

try this

use newbb dhtml , click youtube, paste short url
Resized Image

input video width , default 16
Resized Image

input video height , default 9
Resized Image

test more, long and short , 16:9 and 4:3
Resized Image

post topic , video is widescreen , so black of 4:3 .
Resized Image

try my mobile phone, RWD ok !
Resized Image

thanks , i'm come from taiwan. (not china)
my english very pool , so embarrassed
everybody can change my pool translate :P

and hope next version have new best youtube code.

my blog
http://3q.9527.tw/80

2
oswaldo
Re: hack youtube for html5 & bootstrap3 RWD
  • 2016/1/15 2:43

  • oswaldo

  • Quite a regular

  • Posts: 212

  • Since: 2008/8/22


Thanks xd9527 very good.

it look better

3
Mamba
Re: hack youtube for html5 & bootstrap3 RWD
  • 2016/1/16 16:15

  • Mamba

  • Moderator

  • Posts: 11274

  • Since: 2004/4/23


Thank you so much xd9527 for your code contribution! This is always very much appreciated!

Richard, our Core Team leader was looking at that and will try to incorporate it into XOOPS!

Thank you again!
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

4
xd9527
Re: hack youtube for html5 & bootstrap3 RWD
  • 2016/1/20 7:43

  • xd9527

  • Just popping in

  • Posts: 8

  • Since: 2016/1/13


thank Mamba :)

//compatible old all topic youtube code //

if your site have many old topic used youtube code
but you don't want edit many topic?

ok , find this code
$src "http://www.youtube.com/embed/" $matches[2];


change to this code
$src "http://www.youtube.com/embed/" $matches[2];
if (empty(
$width) || empty($height))
{
$width 16;$height 9;}
 if ((
$width) > 16 ||($width) > 9
{if ((
$width $height) > 1.5)
{
$width 16;$height 9;}
else {
$width 4;$height 3;} }


logic
1. if empty , auto add 16:9
2. if larger size (425 or other), auto change to 16:9 or 4:3

done!

5
Mamba
Re: hack youtube for html5 & bootstrap3 RWD
  • 2016/1/22 17:17

  • Mamba

  • Moderator

  • Posts: 11274

  • Since: 2004/4/23


Thank you again!

Richard added your previous code to the future XOOPS 2.5.8.

I am not sure if he saw your last post, but I'll share it with him...
Support XOOPS => DONATE
Use 2.5.10 | Docs | Modules | Bugs

Login

Who's Online

68 user(s) are online (49 user(s) are browsing Support Forums)


Members: 0


Guests: 68


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Jan 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits