Fluid YouTube/Vimeo BBcodes (auto-created)

[MarkFL]

This product creates 2 new BBCodes that will allow your users to post YouTube/Vimeo videos in fluid containers, i.e., containers that will dynamically resize if the browser window is resized to always maintain a 16:9 aspect ratio and to maintain left/right margins based on a defined percentage of the parent element's width.

Once installed, instruct your users that they merely need to include the video identifiers within the BBCode tags. For example:

xjglB04TOno

22439234

Features:

Upon installation, your database is edited to create the two new BBCodes thereby eliminating the need for you to go through the tedious process of manually adding them yourself.
A button for each BBCode is added to your editor's toolbar.
The CSS of the video elements is configurable via the product settings.


Update: version 1.1


Added code so that CSS is rendered on the scripts necessary for the videos to display correctly when previewing a post or viewing in the topic review.

Update: version 1.2


Added the option to define a maximum width for the videos.

Update: version 1.3


Added support for CMS articles.

Update: version 1.4


Added support for .Enhanced View Forum Posts (search results) (https://vborg.vbsupport.ru/showthread.php?t=318407)

Update: version 1.5


Template now cached.

Update: version 1.6


Added support for CMS previews.


Update: version 1.7


Added support for SSL.

The BBCode buttons in the editor toolbar:

https://vborg.vbsupport.ru/attachment.php?attachmentid=152999&stc=1&d=1437852009

A YouTube video in a post:

https://vborg.vbsupport.ru/attachment.php?attachmentid=153001&stc=1&d=1437852009

Upon clicking the BBCode buttons in the editor toolbar, you simply need to enter the video's identifier between the generated tags.

To Install:

Download and extract the attached .zip file.

Upload the contents of the "upload" folder to your root directory. This is the image files for the BBCode buttons.

In AdminCP go to Plugins & Products -> Manage Products -> Add/Import Product.

Click on "Choose File" and browse to the product xml file that was packaged in the .zip file.

Click "Import"

Visit the product's settings to configure the CSS (there are default values, so the product will run without having to initially set the settings). Each setting has an explanation of its use.

https://vborg.vbsupport.ru/attachment.php?attachmentid=153351&stc=1&d=1442242111

Support for this product can be found here:


MHB - Fluid YouTube/Vimeo BBcodes (auto-created) (http://mathhelpboards.com/vbulletin-products-61/fluid-youtube-vimeo-bbcodes-auto-created-21883.html)
TAZ - Fluid YouTube/Vimeo BBcodes (auto-created) (https://theadminzone.com/threads/fluid-youtube-vimeo-bbcodes-auto-created.145176/)

[akz645]

Could you do one for facebook too, please?

[MarkFL]

Could you do one for facebook too, please?

Perhaps eventually...I wdon't do facebook and I would have to figure out how to integrate their embed code format. :)

[RyanCB]

Hello, our site is using SSL and i have mod'd the links in the plugin to be https: . The video shows but when you try to hit play it says an error has occurred. Any ideas what we are missing? Link to our test thread.

https://www.boostedforums.net/showthread.php?56-Youtube-Test

[RichieBoy67]

Very Good Mark! Thanks!

[MarkFL]

Hello, our site is using SSL and i have mod'd the links in the plugin to be https: . The video shows but when you try to hit play it says an error has occurred. Any ideas what we are missing? Link to our test thread.

https://www.boostedforums.net/showthread.php?56-Youtube-Test

I only see a blank video element when I follow the link. Can you post what your HTML replacement for the BBCode looks like after your edit?

[Fizzgig]

I only see a blank video element

Hi ..im getting the same, just comes up with error ...thanks

[MarkFL]

Hi ..im getting the same, just comes up with error ...thanks

What error message are you getting?

[Fizzgig]

Hi..its the same error when the video has been removed on youtube...

[MarkFL]

Hi..its the same error when the video has been removed on youtube...

Hmm...okay, would you please post:


A link to one of your pages containing such a video.
The video's identifier (what you are putting in between the tags) on the page to which you link so I can try it on my dev site.

[Fizzgig]

http://sandstormradio.org/showthread.php?38-test&p=40#post40

https://www.youtube.com/watch?v=gHtTrcTJADU

[MarkFL]

That video plays fine for me on my dev site...does the post contain the following?

gHtTrcTJADU

[MarkFL]

Update: version 1.1


Added code so that CSS is rendered on the scripts necessary for the videos to display correctly when previewing a post or viewing in the topic review.

[Fizzgig]

gHtTrcTJADU
that plays ok

[MarkFL]

gHtTrcTJADU
that plays ok

My apologies for not including the instructions on how to actually use the BBCode in my initial post (which I will fix next). Thank you for your patience. :up:

[Fizzgig]

still getting the same error with the new one

tryed it like this https://www.youtube.com/watch?v=ilfXHrPlftg

and like this ilfXHrPlftg

[MarkFL]

still getting the same error with the new one

What new one? A new video or the new version of this add-on? What are you actually posting?

[Fizzgig]

i just got that to work

50061391

but i think it would be better if you got it to work with the full url as people are going to do what i did and post the full url...thanks

[manutdvn]

Thank you. It works but how can I change the size?

[MarkFL]

Thank you. It works but how can I change the size?

You can change the size by adjusting the margins. For example, say you want the video element to be half as wide as the parent element and centered, then you would set both margins to 25. Or if you wanted it half as wide as the parent element but all the way to the left, then set the left margin to 0 and the right margin to 50. :)

[billstelling]

Great mod.. Thanks.

[My Hattiesburg]

Another great mod but I have a request.

Would it be possible to restrict the biggest size to a certain pixel dimension, like 720x480 or any reasonable size? On big monitors the videos are huge and it just doesn't look appropriate to me.

Thanks.

[MarkFL]

Another great mod but I have a request.

Would it be possible to restrict the biggest size to a certain pixel dimension, like 720x480 or any reasonable size? On big monitors the videos are huge and it just doesn't look appropriate to me.

Thanks.

I think that would be possible...I will look into adding a setting for the maximum width and post back here with my results. :)

[MarkFL]

Update: version 1.2


Added the option to define a maximum width for the videos.

[billstelling]

Awesome mod.. Thanks for taking the time. It goes nicely with MrGrims highslide mod as they look similar in appearance. Really completes the look for vids and pics..

[ArcadeSyndicate]

thank you, works fine in forums but not in cms articles.

is there a way to add the css settings manually?

[MarkFL]

thank you, works fine in forums but not in cms articles.

is there a way to add the css settings manually?

In the plugin that renders the CSS, you could add the CMS script name to the array in the conditional at the top:

if (in_array(THIS_SCRIPT,array('showthread', 'editpost', 'newreply', 'newthread')))

[ArcadeSyndicate]

hmm, it isn't content...

http://www.*********.net/content.php/76-South-Park-Start-der-19-Staffel

also fullscreen isn't availiable, tried different videos :(

[MarkFL]

Instead of "content" for the script name, try "vbcms" and see if that works. :)

[ArcadeSyndicate]

that's it, thank you :up:



[edit] tried the complete code first, but both ways work :D

[MarkFL]

that's it, thank you :up:



[edit] tried the complete code first, but both ways work :D

Okay, great! :D

I will update the add-on so that support for CMS articles is included.

[MarkFL]

Update: version 1.3


Added support for CMS articles.

[Flugel]

Thanks, works well.

However I already have an old bbcode for embedding YouTube so I get two buttons appearing in the new post editor. If I delete that old custom bbcode it'll break all previous embedded videos won't it? Instead, am I better just altering your bbcode to match the old tag? [myoutube] to [yt]

Would that work or is there an easier solution?

TIA

[MarkFL]

Thanks, works well.

However I already have an old bbcode for embedding YouTube so I get two buttons appearing in the new post editor. If I delete that old custom bbcode it'll break all previous embedded videos won't it? Instead, am I better just altering your bbcode to match the old tag? [myoutube] to [yt]

Would that work or is there an easier solution?

TIA

Yes, if you change the "BB Code Tag Name" field of the new BBCode to YT then all the previously embedded YouTube videos will use the new HTML replacement. :)

[MarkFL]

Update: version 1.4


Added support for .Enhanced View Forum Posts (search results) (https://vborg.vbsupport.ru/showthread.php?t=318407)

[SᴩiDᴇЯ]

Hi Mark i uploaded the file then installed product in my vb 4.1.5 and it worked flawless, great job and love your work well done.

[MarkFL]

Hi Mark i uploaded the file then installed product in my vb 4.1.5 and it worked flawless, great job and love your work well done.

Music to my ears! Thanks! :up:

[mrt12345]

Hello great mod and thanks for your hard work. just having one little problem i am running 4.2.3 and the youtube logo dose not appears but the space is blank but still works. I gather it is the path of the logo is off ?

[MarkFL]

Hello great mod and thanks for your hard work. just having one little problem i am running 4.2.3 and the youtube logo dose not appears but the space is blank but still works. I gather it is the path of the logo is off ?

Does the Vimeo icon appear?

[mrt12345]

just another funny thing.I copy the icon url from vemo and it works it is just something with this youtube logo lol

[mrt12345]

Does the Vimeo icon appear?
yes it works well i dont think it is the code.

[MarkFL]

Try uploading the icons again, and then clear your browser's cache.

[mrt12345]

ok i did and still did not worked for me but I renamed it yt.png and it worked . I swear i double checked everything and the path was correct and with a cache refresh. i guess it is just one of these days... but great mod it works thanks.....

[MarkFL]

ok i did and still did not worked for me but I renamed it yt.png and it worked . I swear i double checked everything and the path was correct and with a cache refresh. i guess it is just one of these days... but great mod it works thanks.....

Well, while I have no idea why it didn't work with the original name, I am glad you got it to work. :)

[mrt12345]

Well, while I have no idea why it didn't work with the original name, I am glad you got it to work. :)


Thanks i just have one more question . when i post a video i just get a blank screen with a play button then i get a link to go here. i tried different formats and videos same results

https://support.google.com/youtube/answer/3037019?p=player_error1&rd=1


any thoughts ?

[mrt12345]

Thanks i just have one more question . when i post a video i just get a blank screen with a play button then i get a link to go here. i tried different formats and videos same results

https://support.google.com/youtube/answer/3037019?p=player_error1&rd=1


any thoughts ?

ok it got it to work thanks. A bit cumbersome for users but ill put a help on the website some place .

[MarkFL]

ok it got it to work thanks. A bit cumbersome for users but ill put a help on the website some place .

What was the issue? You should be able to just put the video id in between the tags.

[MarkFL]

Update - Version 1.5:


Template now cached.

[MarkFL]

Update - Version 1.6:


Added support for CMS previews.

[Techno Cowboy]

Thanks for the Product & Updates Mark!

[Snowhog]

Installed and tried it out.

The two new BBCode icons appear in the toolbar. I tried the YouTube one. Put in the YouTube video identifier code between the tags. In Preview all that shows is the video container; there are no buttons or anything else.

I've temporarily uninstalled the MOD, but would like to use it if you can help me to get it working.

vBulletin 4.2.3 Patch Level 2. We are running our site with SSL if that makes a difference.

[MarkFL]

Installed and tried it out.

The two new BBCode icons appear in the toolbar. I tried the YouTube one. Put in the YouTube video identifier code between the tags. In Preview all that shows is the video container; there are no buttons or anything else.

I've temporarily uninstalled the MOD, but would like to use it if you can help me to get it working.

vBulletin 4.2.3 Patch Level 2. We are running our site with SSL if that makes a difference.

Okay, the first thing I would try is change the "http://" in the BBCode replacement to "https://"...please let me know if that works.

[Snowhog]

Thank you.

Changing http: to https: in the Replacement code did the trick. I'm assuming I'll need to do the same for the Vimeo Replacement code as well?

[Snowhog]

The Vimeo Replacement code consists of:
<br><div class="markfl_video_wrapper"><div class="markfl_video_wrapper_header markfl_video_gradient"></div><div style="background-color:transparent"><div class="markfl_video-container"><iframe src="//player.vimeo.com/video/{param}" frameborder="0"<p><a href="http://vimeo.com/{param}"></a> from <a href="http://vimeo.com/terjes"></a> on <a href="https://vimeo.com">Vimeo</a>.</p></iframe></div></div><div class="markfl_video_wrapper_footer markfl_video_gradient"></div></div><br>
What do we 'paste' between ? Their URLs are constructed like YouTube videos. And, there appear to be categories which are part of the URL path to the video.

Nevermind! I had never been to vimeo.com before. If I enter a category and then select something, the format is https://vimeo.com/identifier. Looks like Vimeo is https: already, so no change to Replacement code needed.

Both BBCodes work nicely.

[MarkFL]

Thank you.

Changing http: to https: in the Replacement code did the trick. I'm assuming I'll need to do the same for the Vimeo Replacement code as well?

I will change both, and publish an update, so just wait until I do that, then download the update and install, and you should be good to go.

The Vimeo Replacement code consists of:
<br><div class="markfl_video_wrapper"><div class="markfl_video_wrapper_header markfl_video_gradient"></div><div style="background-color:transparent"><div class="markfl_video-container"><iframe src="//player.vimeo.com/video/{param}" frameborder="0"<p><a href="http://vimeo.com/{param}"></a> from <a href="http://vimeo.com/terjes"></a> on <a href="https://vimeo.com">Vimeo</a>.</p></iframe></div></div><div class="markfl_video_wrapper_footer markfl_video_gradient"></div></div><br>
What do we 'paste' between ? Their URLs are constructed like YouTube videos. And, there appear to be categories which are part of the URL path to the video.

You include just the video identifier at the end of the URL. :)

[MarkFL]

Update - version 1.7:


Added support for SSL.

[Snowhog]

Version 1.7 installed.

Thank you. Another nice addition to our Forum.:up:

[MarkFL]

Version 1.7 installed.

Thank you. Another nice addition to our Forum.:up:

Thank you for your valuable feedback and testing, which helped me make this product more useful as more folks are moving to SSL. :up:

[Stratis]

Tested in vb4.2.0 pl4 (https)
Cool and very useful. Thank you very much :)