XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. Xoops Development / 
  3. XOOPS Core Hacks 
  4.  / hack youtube for html5 & bootstrap3 RWD
Register
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 = "{$width}' height='{$height}'>{$src}'>" .
        "" .
        "{$src}' type='application/x-shockwave-flash' wmode='transparent' width='425' height='350'>" .
        "";


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


--

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

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

  • 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.11 | 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: 11409

  • 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.11 | Docs | Modules | Bugs

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

211 user(s) are online (78 user(s) are browsing Support Forums)

Members: 0

Guests: 211

more...

Donat-O-Meter

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

Latest GitHub Commits