WordPress.org

Ready to get started?Download WordPress

Forums

Frisco for BuddyPress
[resolved] Cover Video Youtube (4 posts)

  1. Cidade Sonho
    Member
    Posted 1 year ago #

    Hello Friends of the Frisco Theme.
    Cover video youtube on profile.

    1 - Download the Plugin and enable it

    http://wordpress.org/extend/plugins/wpmbytplayer/

    http://somdefabrica.com.br/wp-content/uploads/2012/12/mbYTPlayer-admin.jpg follow the example

    2 - Add Script on Header.php Frisco

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    	<script type="text/javascript" src="inc/jquery.mb.CSSAnimate.js"></script>
    	<script type="text/javascript" src="inc/jquery.mb.HTML5YTPlayer.js"></script>
    	<link href="css/HTML5YTPlayer.css" media="all" rel="stylesheet" type="text/css">

    3 - Add CSS Player on custom.css

    .player{
    			display:inline-block;
    			vertical-align:top;
    			overflow: hidden;
                            position: relative;
    			width:90%;
    			height:500px;
    			left:0;
    			overflow: hidden;
    			border-radius: 4px;
    			-moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
    			box-shadow: 0 0 10px rgba(0,0,0,.5);
    		}

    3 - Create a User Field (Video URL) and use this later

    <?php bp_profile_field_data( 'field=ID' );?> change ID to Video URL ID Field

    4 - Add this DIV PI before the DIV ITEM HEADER AVATAR
    bp-default/members/single/member-header.php

    <div id="P1" class="player" style="display:block; margin: auto; background: rgba(0,0,0,0.5)" data-property="{videoURL:'<?php bp_profile_field_data( 'field=ID' );?>',containment:'self',startAt:0,mute:true,autoPlay:true,loop:true,opacity:0.6}"> don´t close the DIV.

    5 - Add this style to the div that will be on top of the video, example:

    <div id="item-header-avatar" style="position: relative; z-index: 1;">
    <div id="item-header-content" style="position: relative; z-index: 1;">
    <div id="item-buttons" style="position: relative; z-index: 1;">

    6 - Close the DIV Player after template notices

    <?php do_action( 'template_notices' ); ?></div>

    Sorry for the english, I'm brazilian.
    See the links and See the result.

    http://somdefabrica.com.br/members/cesar/ - My Profile
    http://somdefabrica.com.br/grupos/jorge-e-mateus/ - Group

    It was hard but it worked, hopefully it works out for you too.

  2. Cidade Sonho
    Member
    Posted 1 year ago #

    4 - Add this DIV PI before the DIV ITEM HEADER AVATAR
    bp-default/members/single/member-header.php

    <div id="P1" class="player" style="display:block; margin: auto; background: rgba(0,0,0,0.5)" data-property="{videoURL:'<?php bp_profile_field_data( 'field=ID' );?>',containment:'self',startAt:0,mute:true,autoPlay:true,loop:true,opacity:0.6}">

    Sorry :X

  3. Cidade Sonho
    Member
    Posted 1 year ago #

    2 - Add Script on Header.php Frisco

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

    Don´t forget this :) I forgot :X

  4. David Carson
    Member
    Theme Author

    Posted 1 year ago #

    I appreciate your eagerness to share and talk about the Frisco theme. But threads like this aren't really support requests. Maybe you should start a blog about your customizations so you can share with others?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.