1. 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...

Discussion in 'Styling and Customization Questions' started by russoroni, Feb 28, 2014.

  1. russoroni

    russoroni Active Member

    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:

    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
    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


Share This Page