Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Anyway to post YouTube videos without using BBCode?
This discussion has been closed.
Comments
I wrote a too similar code posted by Blizeh ^^ ...with some little differences:
it's a parameter deprecated for the W3C... Youtube and similar websites publish a wrong and not standard code... IMHO.
I've added the new presentation code for the 3 websites with a customize rule style from CSS.
function VideoLink($Matches) { $Type = strtolower(trim($Matches[2])); $ID = $Matches[3]; switch($Type) { case 'google': $link_id = 'http://video.google.com/googleplayer.swf?docId='.$ID.''; $link_video = $link_id; break; case 'youtube': $link_id = 'http://www.youtube.com/v/'.$ID.''; $link_video = $link_id; break; case 'myspace': $link_id = 'http://lads.myspace.com/videos/vplayer.swf" flashvars="m='.$ID.'&type=video'; $link_video = 'http://vids.myspace.com/index.cfm?fuseaction=vids.individual&videoid='.$ID.''; break; default : return $Matches[0]; } return ( '<div class="pre_video">'. '<h3>Your SiteName#Video</h3>'. '<a href="'.$link_video.'">Link to Vídeo</a>'. '<div class="video">'. '<object width="425" height="350" type="application/x-shockwave-flash" data="'.$link_id.'">'. '<param name="movie" value="'.$link_id.'" />'. '<param name="wmode" value="transparent" />'. '</object>'. '</div>'. '</div>'); }Also... BBInsertBar write more deprecated tags, f.e:
<b><i><u><s>I changed this tags for XHTML:
<strong><em><del>In case of U tag:
a class CSS to write a text-decoration:
CSS:
/* Underline */ .underline { text-decoration: underline; }BBInsertBar:
echo "<a onclick=\"decoration('underline','".$this->Context->Configuration["BBBAR_DISABLE_VANILLACONS_BAR"]."')\"> <img src='".$this->Context->Configuration["BASE_URL"].$this->Context->Configuration["BBBAR_PATH"]."buttons/text_underline.gif' alt='".$this->Context->GetDefinition('bbunderline')."' title='".$this->Context->GetDefinition('bbunderline')."' /></a>";Te new Function for Text-Decoration:
function decoration(Style,Smilies){ document.getElementById("BBBarColorPicker").style.display = 'none'; document.getElementById("BBBarFontPicker").style.display = 'none'; if (Smilies == 'FALSE') document.getElementById("BBBarSmilies").style.display = 'none'; if(document.getElementById("Radio_BBCode")){ if (document.getElementById('Radio_BBCode').checked) wert = 'BBCode'; } if(document.getElementById("Radio_Html")){ if (document.getElementById('Radio_Html').checked) wert = 'Html'; } if(document.getElementById("Radio_Text")){ if (document.getElementById('Radio_Text').checked) wert = 'Text'; } if (wert != 'Text') { var input = document.getElementById("CommentBox"); input.focus(); var start = input.selectionStart; var end = input.selectionEnd; var insText = input.value.substring(start, end); if (wert == 'Html') input.value = input.value.substr(0, start) + '<span class="'+Style+'">'+insText+'</span>' + input.value.substr(end); }}SPAN is another deprecated tag... I think the best way is: instead of SPAN tag, a DIV tag with display inline:
/* Underline */ .underline { text-decoration: underline; display: inline; }and the function:
if (wert == 'Html') input.value = input.value.substr(0, start) + '<div class="'+Style+'">'+insText+'</div>' + input.value.substr(end);Certainly this leads to new possibilities with the function decoration and some class in CSS:
echo "<a onclick=\"decoration('underline','".$this->Context->Configuration["BBBAR_DISABLE_VANILLACONS_BAR"]."')\"> <img src='".$this->Context->Configuration["BASE_URL"].$this->Context->Configuration["BBBAR_PATH"]."buttons/text_underline.gif' alt='".$this->Context->GetDefinition('bbunderline')."' title='".$this->Context->GetDefinition('bbunderline')."' /></a>";...this is only a little suggestion ^^
S!
PD: One more time... sorry lang :__(
Its better if each case has its own complete object code
the video sizes of all the services are different
I used the object tag according to W3C specifications:
http://www.w3.org/TR/html4/struct/objects.html#h-13.3.2:
<OBJECT classid="http://www.miamachina.it/analogclock.py"> <PARAM name="height" value="40" valuetype="data"> <PARAM name="width" value="40" valuetype="data"> This user agent cannot render Python applications. </OBJECT>I checked the example on Linux: ffx2.0, Opera9.0, Epiphany and I.E.6(wine) and it works fine.
Google say:
<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=-3571977876885478487" flashvars=""> </embed>U say:
<object width="425" height="350" type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=-3571977876885478487"> <param name="movie" value="http://video.google.com/googleplayer.swf?docId=-3571977876885478487" /> <param name="wmode" value="transparent" /> </object>... what's the problem? oO'
...in any case, I think it's better a code for each video, ok, but...
I don't know still how the object tag have influence in the size of video oO?, can you post any example m8?
Thx in avance ^^
just that u have one object code and u pass parameters to it. which might or not be fit other services.
just make the resolution a variable as well and pass it to the object code.
Services like Brightcove and Revver allow higher resolutions, and ones like stage6 allow even higher resolutions. ur dropping them all down to 400px.
why would i want to do that.
what about services that require classID like from Stage6
<object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" width="640" height="379" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab"> <param name="src" value="http://stage6.divx.com/GBTimelapse/show_video/1083403" /> <embed type="video/divx" src="http://stage6.divx.com/GBTimelapse/show_video/1083403" width="640" height="379" pluginspage="http://go.divx.com/plugin/download/"> </embed> </object>I'll include the code here in case anyone is interested.
In quicktags.js, the button declaration:
edButtons[edButtons.length] = new edButton('ed_youtube' ,'YouTube' ,'' ,'' ,'y' );Added case to edShowButton to use my custom onClick:
function edShowButton(button, i) { if (button.id == 'ed_img') { document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />'); } else if (button.id == 'ed_link') { document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />'); } else if (button.id == 'ed_youtube') { document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertYouTube(edCanvas, ' + i + ');" value="' + button.display + '" />'); } else { document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '" />'); } }Utility function used by my onClick handler:
function getSelected(myField) { var selectedText = ''; if (document.selection) { var sel = document.selection.createRange(); if (sel.text.length > 0) { selectedText = sel.text; } } else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; if (startPos != endPos) { selectedText = myField.value.substring(startPos, endPos); } } return selectedText; }And finally, a quick and dirty method to insert the markup:
function edInsertYouTube(myField, i, defaultValue) { var frm = document.getElementById('frmPostComment'); if (frm) { // Do stuff in here, like... setCheckedValue(document.forms['frmPostComment'].elements['FormatType'], 'Html'); }else{ setCheckedValue(document.forms['frmPostDiscussion'].elements['FormatType'], 'Html'); } // use selected text as the default defaultValue = getSelected(myField); if (!defaultValue) { defaultValue = ''; } if (!edCheckOpenTags(i)) { var URL = prompt('Enter the YouTube link' ,defaultValue); if (URL) { // First try matching the form "youtube.com/v/video_id" videoIdRegex = /youtube\.com\/v\/(\w+)/ matches = videoIdRegex.exec (URL); // if that form wasn't matched if ( (matches == undefined) || (matches[1] == undefined) ) { // try matching the form "youtube.com/watch?v=video_id" videoIdRegex = /youtube\.com\/watch\?v\=(\w+)/; matches = videoIdRegex.exec (URL); } if ( (matches == undefined) || (matches[1] == undefined) ) { alert ('Unable to find a YouTube video in your entry.'); } else { html = '<video type="youtube">' + matches[1] + '</video>'; edInsertContent(myField, html); } } } }Sorry, i didn't understand a word of your message xDD
Again my bad english :__(
Now, i'm trying to build a plugin for Wordpress with more options, i have included video's size, title, position... and the plugin allow you to insert another objects with a valid markup, like img in the new XHTML 2.0
About videos, i'm trying to check filetype for Mime-Type, or get html from link... All work in Wordpress but i think it's movable to Vanilla, ATM, i achieved to put valid code for Quicktime and the rest of popular services.
I'm on it.
S!