• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Change background behind forum titles / description /thread tools etc...

russoroni

Active member
#1
I recently found this nifty background youtube player and I want to see if I like it. http://www.jqueryscript.net/other/A...d-Plugin-with-HTML5-Youtube-API-YTPlayer.html

I'd like to put it behind the forum titles and stuff. NOT in the description but behind everything. Heres the code in the instructions:

Code:
1. Include jQuery framework and jQuery YTPlayer on the page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>

2. Include jQuery YTPlayer CSS to style your player

<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">

3. Call the plugin

<script>
jQuery(function(){
    jQuery(".player").mb_YTPlayer();
});
</script>

4. Initialize a YTPlayer as background


<a class="player" data-property="{videoURL:'BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1}">My video</a>

5. All of the options can be simply set by using data-* attributes.


opacity: 1 //(int) 0 → Set the opacity of the player;
mute: true //(boolean) mute the audio;
showControls: true // or false If you set the player as background you can show controls adding this parameter;
ratio: ‘4/3’ // or “16/9” to set the aspect ratio of the movie;
quality: ‘default’ // or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”;
containment: (string) // the CSS selector of the DOM element where you want the video background; if not specified it takes the “body”; if set to “self” the player will be instanced on that element;
optimizeDisplay: true // (boolean) will fit the video size into the window size optimizing the view;
loop: true // (boolean) or false loops the movie once ended.
startAt: 20 // (int) Set the seconds the video should start at.
showYTLogo: true // (boolean) Show or hide the YT logo and the link to the original video URL.
showControls: true // (boolean) Show or hide the controls bar at the bottom of the page.
Image 2.gif

my site is www.trailpeople.org

Thanks