xoops forums

xd9527

Just popping in
Posted on: 2016/1/14 4:06
xd9527
xd9527 (Show more)
Just popping in
Posts: 8
Since: 2016/1/13
#1

hack youtube for html5 & bootstrap3 RWD

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

oswaldo

Not too shy to talk
Posted on: 2016/1/15 2:43
oswaldo
oswaldo (Show more)
Not too shy to talk
Posts: 184
Since: 2008/8/22
#2

Re: hack youtube for html5 & bootstrap3 RWD

Thanks xd9527 very good.

it look better

Mamba

Moderator
Posted on: 2016/1/16 16:15
Mamba
Mamba (Show more)
Moderator
Posts: 10770
Since: 2004/4/23
#3

Re: hack youtube for html5 & bootstrap3 RWD

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

xd9527

Just popping in
Posted on: 2016/1/20 7:43
xd9527
xd9527 (Show more)
Just popping in
Posts: 8
Since: 2016/1/13
#4

Re: hack youtube for html5 & bootstrap3 RWD

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!

Mamba

Moderator
Posted on: 2016/1/22 17:17
Mamba
Mamba (Show more)
Moderator
Posts: 10770
Since: 2004/4/23
#5

Re: hack youtube for html5 & bootstrap3 RWD

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