vb.org Archive - Show Thread Enhancements

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)

- - Show Thread Enhancements - Youtube Spoiler Fancy (https://vborg.vbsupport.ru/showthread.php?t=321595)

Youtube Spoiler Fancy

What this does
This code will turn all of your Youtube embed code into fancy spoiler that users can click to open and close to view the Youtube video.

Screenshots
http://korrupted-gaming.com/images/YT_open1.jpg
http://korrupted-gaming.com/images/YT_demo_open.jpg

INSTALL

Please back up your "bbcode_video" code before making any edits so you can restore if mistakes happen.

IMAGES
Upload the images to your images folder

YT_open.jpg
YT_close.jpg

CODE
In admincp ? Styles & Templates ? Style Manager ? Edit Templates ? BB Code Layout Templates ? bbcode_video

Find: line 8

HTML Code:

<vb:elseif condition="$provider == 'youtube'" />

Find and replace: line 9

HTML Code:

<iframe title="YouTube video player" width="640" height="360" src="//www.youtube.com/embed/{vb:raw code}?wmode={vb:raw wmode}" frameborder="0" allowfullscreen></iframe>

With: line 9

HTML Code:

<div style="padding-top:4px;padding-right:4px;">

        <div>

                <img name="YouTube Spoiler" type="image" src="images/YT_open.jpg" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.src = 'images/YT_close.jpg'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '';this.src = 'images/YT_open.jpg'; }">

        </div>

        <div style="margin: 0px; padding:0px;">

                <div style="display: none;">

                        <iframe title="YouTube video player" width="640" height="360" src="//www.youtube.com/embed/{vb:raw code}?wmode={vb:raw wmode}" frameborder="0" allowfullscreen></iframe>

                </div>

        </div>

</div>

Save and reload - I recommend you tick the "Save in Template History?" so you can undo any changes at a later date or if an mistake has happened.

I have included the code and images in the attachment.

Just to clarify this does not help with page load times.

This is my first post if I have made any mistakes please let me know.

Why though? It is adding another barrier between the user and the content. If you added usergroup permissions or something it may be worthwhile.

It helps keeps the posts smaller so less scrolling. I find if we have a text heave posts with some YouTube videos it just needless makes the page longer. I also think it makes the posts look more cleaner and tidy.

That makes sense and even better if it decreases page load times. Have you tested that? That would be a major reason to use it for sure.

Thanks!

Sorry it still loads the contents inside the div so it does not lower the load times. It just a simple "display: none" though I would like to find a better way to do it so it does improve load times.

@Richie There is a way to do it that I posted about a long time ago. This page that I gtmetrix tested has 5 youtube videos on it.
http://www.video-game-chat.com/forum...-hcbailly.html
https://gtmetrix.com/reports/www.vid...t.com/8Hr54EAo
http://www.webpagetest.org/result/160127_74_D6/

Here's the js I use.
http://www.video-game-chat.com/youtube.js

After some digging I used this tutorial to help with loading times and it has a big impact. Its worth spending the time putting on.

http://www.skipser.com/p/2/p/youtube...ogle-plus.html

Quote:

Originally Posted by SharpShotGif (Post 2563556)

After some digging I used this tutorial to help with loading times and it has a big impact. Its worth spending the time putting on.

http://www.skipser.com/p/2/p/youtube...ogle-plus.html

Did you add the following code in your headincludes or postbit? You saw a notable difference?

PHP Code:


		
			
<script type="text/javascript">optimizeYouTubeEmbeds()</script>

I added that in my footer.

Yes a huge difference I have set up 2 pages to show you.

With iframe replace code

Without code

I also noticed a bug with this code if you have 2 or more of the same video on the page it will load/change the top most video first even if you click on the bottom one.

That's not a vbulletin page you linked to. You also didn't mention which style template you used.

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_html_printable (1)bbcode_php_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01167 seconds Memory Usage 1,743KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_html_printable (1)bbcode_php_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: