The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Youtube Spoiler Fancy Details »» | |||||||||||||||||||||||||||
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 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'" />
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> 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> 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. Download Now
Show Your Support
|
Comments |
#2
|
||||
|
||||
Why though? It is adding another barrier between the user and the content. If you added usergroup permissions or something it may be worthwhile.
|
#3
|
|||
|
|||
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 |
#4
|
||||
|
||||
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! |
#5
|
|||
|
|||
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.
|
#6
|
|||
|
|||
@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 |
2 благодарности(ей) от: | ||
RichieBoy67, SharpShotGif |
#7
|
|||
|
|||
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 |
#8
|
||||
|
||||
Quote:
PHP Code:
|
#9
|
|||
|
|||
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. |
#10
|
|||
|
|||
That's not a vbulletin page you linked to. You also didn't mention which style template you used.
|
Благодарность от: | ||
RichieBoy67 |
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|