Youtube Spoiler Fancy

[SharpShotGif]

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
<vb:elseif condition="$provider == 'youtube'" />

Find and replace: line 9
<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
<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('d iv')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.src = 'images/YT_close.jpg'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')[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.

[RichieBoy67]

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

[SharpShotGif]

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.

[RichieBoy67]

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!

[SharpShotGif]

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.

[final kaoss]

@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.
www.video-game-chat.com/forum/pc-games/196193-lets-play-final-fantasy-iv-pc-hcbailly.html
https://gtmetrix.com/reports/www.video-game-chat.com/8Hr54EAo
http://www.webpagetest.org/result/160127_74_D6/

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

[SharpShotGif]

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-video-embed-like-google-plus.html

[RichieBoy67]

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-video-embed-like-google-plus.html

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


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

[SharpShotGif]

I added that in my footer.

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

With iframe replace code (http://korrupted-gaming.com/YTloadingtime/YT_demo1.html)

Without code (http://korrupted-gaming.com/YTloadingtime/YT_demo2.html)

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.

[final kaoss]

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