Cover Video Youtube

  • Resolved Cidade Sonho

    (@somdefabrica)


    11 years, 4 months 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Cidade Sonho

    (@somdefabrica)

    11 years, 4 months 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

    Thread Starter Cidade Sonho

    (@somdefabrica)

    11 years, 4 months ago

    2 – Add Script on Header.php Frisco

    <script>

		jQuery(function(){
			jQuery(".player").mb_YTPlayer();
		});

	</script>

    Don´t forget this 🙂 I forgot :X

    Theme Author David Carson

    (@davidtcarson)

    11 years, 3 months 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?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Cover Video Youtube’ is closed to new replies.