PLAYER SIZING
153 views
Skip to first unread message
BartNKCMO
Oct 13, 2013, 2:50:38 PM10/13/13
to jpl...@googlegroups.com
I have my player plays the video fine on the site but the player seems to small can someone please help me resize the player below is the coding I am using
<html>
<head>
<link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://www.grantscustomhomes.com/video/m4v/gch.m4v",
ogv: "http://www.grantscustomhomes.com/video/ogv/gch.ogv",
poster: "http://www.grantscustomhomes.com/video/poster/img1.png"
});
},
swfPath: "/js",
supplied: "m4v, ogv"
});
});
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video ">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>Designed by EGT Software for Grants Custom Homes www.eatgafftape.com</li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</body>
<head>
<link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://www.grantscustomhomes.com/video/m4v/gch.m4v",
ogv: "http://www.grantscustomhomes.com/video/ogv/gch.ogv",
poster: "http://www.grantscustomhomes.com/video/poster/img1.png"
});
},
swfPath: "/js",
supplied: "m4v, ogv"
});
});
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video ">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>Designed by EGT Software for Grants Custom Homes www.eatgafftape.com</li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</body>
Fer
Oct 14, 2013, 11:11:35 AM10/14/13
to jpl...@googlegroups.com
You will need to edit your css file; I'm not sure of how the class is called in the blue monday theme, but it has the dimensions of the player, so try to look at the top of the styles code, and you will find out which is the height and width of the player, then you have to change it to the specific size that you want. Once you've done it, it might work, but if you get troubles with it, you'll have to get into the javascript and change the default size. It has some internal problems that should be rewrite. For example, if you want your player to be 100% height x 100% width, you can do it, but you have to make a javascript function to give the poster a proportional size, because if you leave it that way, it will show the poster with the wrong proportions, just to fit the player. Also, if you change your player size, you'll have to change your playlist size, because it wont work if you leave it that way. I don't understand what you've changed in your code, because it's almost identical to the original, and since you're not showing me up you css, I can't tell you were is the specific problem.
Here's my player: aural.us
As you can see, i've modified the screen dimensions to fit my content, and the playlist display; all that is css combined with javascript.
Here's my player: aural.us
As you can see, i've modified the screen dimensions to fit my content, and the playlist display; all that is css combined with javascript.
BartNKCMO
Oct 14, 2013, 5:08:47 PM10/14/13
to jpl...@googlegroups.com
Here is a copy of the CSS file for everyone to review would like to know which lines I need to change in reference to the size of the player
/*
* Skin for jPlayer Plugin (jQuery JavaScript Library)
* http://www.jplayer.org
*
* Skin Name: Blue Monday
*
* Copyright (c) 2010-2012 Happyworm Ltd
* Dual licensed under the MIT and GPL licenses.
* - http://www.opensource.org/licenses/mit-license.php
* - http://www.gnu.org/copyleft/gpl.html
*
* Author: Silvia Benvenuti
* Skin Version: 4.3 (jPlayer 2.2.0)
* Date: 19th November 2012
*/
* Skin for jPlayer Plugin (jQuery JavaScript Library)
* http://www.jplayer.org
*
* Skin Name: Blue Monday
*
* Copyright (c) 2010-2012 Happyworm Ltd
* Dual licensed under the MIT and GPL licenses.
* - http://www.opensource.org/licenses/mit-license.php
* - http://www.gnu.org/copyleft/gpl.html
*
* Author: Silvia Benvenuti
* Skin Version: 4.3 (jPlayer 2.2.0)
* Date: 19th November 2012
*/
div.jp-audio,
div.jp-audio-stream,
div.jp-video {
div.jp-audio-stream,
div.jp-video {
/* Edit the font-size to counteract inherited font sizing.
* Eg. 1.25em = 1 / 0.8em
*/
* Eg. 1.25em = 1 / 0.8em
*/
font-size:1.25em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */
font-family:Verdana, Arial, sans-serif;
line-height:1.6;
color: #666;
border:1px solid #009be3;
background-color:#eee;
}
div.jp-audio {
width:420px;
}
div.jp-audio-stream {
width:182px;
}
div.jp-video-270p {
width:480px;
}
div.jp-video-360p {
width:640px;
}
div.jp-video-full {
/* Rules for IE6 (full-screen) */
width:480px;
height:270px;
/* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
position:static !important; position:relative;
}
line-height:1.6;
color: #666;
border:1px solid #009be3;
background-color:#eee;
}
div.jp-audio {
width:420px;
}
div.jp-audio-stream {
width:182px;
}
div.jp-video-270p {
width:480px;
}
div.jp-video-360p {
width:640px;
}
div.jp-video-full {
/* Rules for IE6 (full-screen) */
width:480px;
height:270px;
/* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
position:static !important; position:relative;
}
/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
div.jp-video-full div div {
z-index:1000;
}
div.jp-video-full div div {
z-index:1000;
}
div.jp-video-full div.jp-jplayer {
top: 0;
left: 0;
position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
overflow: hidden;
}
top: 0;
left: 0;
position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
overflow: hidden;
}
div.jp-video-full div.jp-gui {
position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
top: 0;
left: 0;
width:100%;
height:100%;
z-index:1001; /* 1 layer above the others. */
}
position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
top: 0;
left: 0;
width:100%;
height:100%;
z-index:1001; /* 1 layer above the others. */
}
div.jp-video-full div.jp-interface {
position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
bottom: 0;
left: 0;
}
position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
bottom: 0;
left: 0;
}
div.jp-interface {
position: relative;
background-color:#eee;
width:100%;
}
position: relative;
background-color:#eee;
width:100%;
}
div.jp-audio div.jp-type-single div.jp-interface {
height:80px;
}
div.jp-audio div.jp-type-playlist div.jp-interface {
height:80px;
}
height:80px;
}
div.jp-audio div.jp-type-playlist div.jp-interface {
height:80px;
}
div.jp-audio-stream div.jp-type-single div.jp-interface {
height:80px;
}
height:80px;
}
div.jp-video div.jp-interface {
border-top:1px solid #009be3;
}
border-top:1px solid #009be3;
}
/* @group CONTROLS */
div.jp-controls-holder {
clear: both;
width:440px;
margin:0 auto;
position: relative;
overflow:hidden;
top:-8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */
}
clear: both;
width:440px;
margin:0 auto;
position: relative;
overflow:hidden;
top:-8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */
}
div.jp-interface ul.jp-controls {
list-style-type:none;
margin:0;
padding: 0;
overflow:hidden;
}
list-style-type:none;
margin:0;
padding: 0;
overflow:hidden;
}
div.jp-audio ul.jp-controls {
width: 380px;
padding:20px 20px 0 20px;
}
width: 380px;
padding:20px 20px 0 20px;
}
div.jp-audio-stream ul.jp-controls {
width: 142px;
padding:20px 20px 0 20px;
}
width: 142px;
padding:20px 20px 0 20px;
}
div.jp-video div.jp-type-single ul.jp-controls {
width: 78px;
margin-left: 200px;
}
width: 78px;
margin-left: 200px;
}
div.jp-video div.jp-type-playlist ul.jp-controls {
width: 134px;
margin-left: 172px;
}
div.jp-video ul.jp-controls,
div.jp-interface ul.jp-controls li {
display:inline;
float: left;
}
width: 134px;
margin-left: 172px;
}
div.jp-video ul.jp-controls,
div.jp-interface ul.jp-controls li {
display:inline;
float: left;
}
div.jp-interface ul.jp-controls a {
display:block;
overflow:hidden;
text-indent:-9999px;
}
a.jp-play,
a.jp-pause {
width:40px;
height:40px;
}
display:block;
overflow:hidden;
text-indent:-9999px;
}
a.jp-play,
a.jp-pause {
width:40px;
height:40px;
}
a.jp-play {
background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;
}
a.jp-play:hover {
background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;
}
a.jp-pause {
background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat;
display: none;
}
a.jp-pause:hover {
background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;
}
background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;
}
a.jp-play:hover {
background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;
}
a.jp-pause {
background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat;
display: none;
}
a.jp-pause:hover {
background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;
}
a.jp-stop, a.jp-previous, a.jp-next {
width:28px;
height:28px;
margin-top:6px;
}
width:28px;
height:28px;
margin-top:6px;
}
a.jp-stop {
background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;
margin-left:10px;
}
background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;
margin-left:10px;
}
a.jp-stop:hover {
background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat;
}
background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat;
}
a.jp-previous {
background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;
}
a.jp-previous:hover {
background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat;
}
background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;
}
a.jp-previous:hover {
background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat;
}
a.jp-next {
background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;
}
a.jp-next:hover {
background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;
}
background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;
}
a.jp-next:hover {
background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;
}
/* @end */
/* @group progress bar */
div.jp-progress {
overflow:hidden;
background-color: #ddd;
}
div.jp-audio div.jp-progress {
position: absolute;
top:32px;
height:15px;
}
div.jp-audio div.jp-type-single div.jp-progress {
left:110px;
width:186px;
}
div.jp-audio div.jp-type-playlist div.jp-progress {
left:166px;
width:130px;
}
div.jp-video div.jp-progress {
top:0px;
left:0px;
width:100%;
height:10px;
}
div.jp-seek-bar {
background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
width:0px;
height:100%;
cursor: pointer;
}
div.jp-play-bar {
background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;
width:0px;
height:100%;
}
overflow:hidden;
background-color: #ddd;
}
div.jp-audio div.jp-progress {
position: absolute;
top:32px;
height:15px;
}
div.jp-audio div.jp-type-single div.jp-progress {
left:110px;
width:186px;
}
div.jp-audio div.jp-type-playlist div.jp-progress {
left:166px;
width:130px;
}
div.jp-video div.jp-progress {
top:0px;
left:0px;
width:100%;
height:10px;
}
div.jp-seek-bar {
background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
width:0px;
height:100%;
cursor: pointer;
}
div.jp-play-bar {
background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;
width:0px;
height:100%;
}
/* The seeking class is added/removed inside jPlayer */
div.jp-seeking-bg {
background: url("jplayer.blue.monday.seeking.gif");
}
div.jp-seeking-bg {
background: url("jplayer.blue.monday.seeking.gif");
}
/* @end */
/* @group volume controls */
a.jp-mute,
a.jp-unmute,
a.jp-volume-max {
width:18px;
height:15px;
margin-top:12px;
}
div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
margin-left: 210px;
}
div.jp-audio div.jp-type-playlist a.jp-mute,
div.jp-audio div.jp-type-playlist a.jp-unmute {
margin-left: 154px;
}
div.jp-audio div.jp-type-single a.jp-unmute {
margin-left: 210px;
}
div.jp-audio div.jp-type-playlist a.jp-mute,
div.jp-audio div.jp-type-playlist a.jp-unmute {
margin-left: 154px;
}
div.jp-audio-stream div.jp-type-single a.jp-mute,
div.jp-audio-stream div.jp-type-single a.jp-unmute {
margin-left:10px;
}
div.jp-audio-stream div.jp-type-single a.jp-unmute {
margin-left:10px;
}
div.jp-audio a.jp-volume-max,
div.jp-audio-stream a.jp-volume-max {
margin-left: 56px;
}
div.jp-audio-stream a.jp-volume-max {
margin-left: 56px;
}
div.jp-video a.jp-mute,
div.jp-video a.jp-unmute,
div.jp-video a.jp-volume-max {
position: absolute;
top:12px;
margin-top:0;
}
div.jp-video a.jp-unmute,
div.jp-video a.jp-volume-max {
position: absolute;
top:12px;
margin-top:0;
}
div.jp-video a.jp-mute,
div.jp-video a.jp-unmute {
left: 50px;
}
div.jp-video a.jp-unmute {
left: 50px;
}
div.jp-video a.jp-volume-max {
left: 134px;
}
left: 134px;
}
a.jp-mute {
background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;
}
a.jp-mute:hover {
background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;
}
a.jp-unmute {
background: url("jplayer.blue.monday.jpg") -60px -170px no-repeat;
display: none;
}
a.jp-unmute:hover {
background: url("jplayer.blue.monday.jpg") -79px -170px no-repeat;
}
a.jp-volume-max {
background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat;
}
a.jp-volume-max:hover {
background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;
}
background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;
}
a.jp-mute:hover {
background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;
}
a.jp-unmute {
background: url("jplayer.blue.monday.jpg") -60px -170px no-repeat;
display: none;
}
a.jp-unmute:hover {
background: url("jplayer.blue.monday.jpg") -79px -170px no-repeat;
}
a.jp-volume-max {
background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat;
}
a.jp-volume-max:hover {
background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;
}
div.jp-volume-bar {
position: absolute;
overflow:hidden;
background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x;
width:46px;
height:5px;
cursor: pointer;
}
div.jp-audio div.jp-volume-bar {
top:37px;
left:330px;
}
div.jp-audio-stream div.jp-volume-bar {
top:37px;
left:92px;
}
div.jp-video div.jp-volume-bar {
top:17px;
left:72px;
}
div.jp-volume-bar-value {
background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;
width:0px;
height:5px;
}
position: absolute;
overflow:hidden;
background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x;
width:46px;
height:5px;
cursor: pointer;
}
div.jp-audio div.jp-volume-bar {
top:37px;
left:330px;
}
div.jp-audio-stream div.jp-volume-bar {
top:37px;
left:92px;
}
div.jp-video div.jp-volume-bar {
top:17px;
left:72px;
}
div.jp-volume-bar-value {
background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;
width:0px;
height:5px;
}
/* @end */
/* @group current time and duration */
div.jp-audio div.jp-time-holder {
position:absolute;
top:50px;
}
div.jp-audio div.jp-type-single div.jp-time-holder {
left:110px;
width:186px;
}
div.jp-audio div.jp-type-playlist div.jp-time-holder {
left:166px;
width:130px;
}
position:absolute;
top:50px;
}
div.jp-audio div.jp-type-single div.jp-time-holder {
left:110px;
width:186px;
}
div.jp-audio div.jp-type-playlist div.jp-time-holder {
left:166px;
width:130px;
}
div.jp-current-time,
div.jp-duration {
width:60px;
font-size:.64em;
font-style:oblique;
}
div.jp-current-time {
float: left;
display:inline;
}
div.jp-duration {
float: right;
display:inline;
text-align: right;
}
div.jp-duration {
width:60px;
font-size:.64em;
font-style:oblique;
}
div.jp-current-time {
float: left;
display:inline;
}
div.jp-duration {
float: right;
display:inline;
text-align: right;
}
div.jp-video div.jp-current-time {
margin-left:20px;
}
div.jp-video div.jp-duration {
margin-right:20px;
}
margin-left:20px;
}
div.jp-video div.jp-duration {
margin-right:20px;
}
/* @end */
/* @group playlist */
div.jp-title {
font-weight:bold;
text-align:center;
}
font-weight:bold;
text-align:center;
}
div.jp-title,
div.jp-playlist {
width:100%;
background-color:#ccc;
border-top:1px solid #009be3;
}
div.jp-type-single div.jp-title,
div.jp-type-playlist div.jp-title,
div.jp-type-single div.jp-playlist {
border-top:none;
}
div.jp-title ul,
div.jp-playlist ul {
list-style-type:none;
margin:0;
padding:0 20px;
font-size:.72em;
}
div.jp-playlist {
width:100%;
background-color:#ccc;
border-top:1px solid #009be3;
}
div.jp-type-single div.jp-title,
div.jp-type-playlist div.jp-title,
div.jp-type-single div.jp-playlist {
border-top:none;
}
div.jp-title ul,
div.jp-playlist ul {
list-style-type:none;
margin:0;
padding:0 20px;
font-size:.72em;
}
div.jp-title li {
padding:5px 0;
font-weight:bold;
}
div.jp-playlist li {
padding:5px 0 4px 20px;
border-bottom:1px solid #eee;
}
padding:5px 0;
font-weight:bold;
}
div.jp-playlist li {
padding:5px 0 4px 20px;
border-bottom:1px solid #eee;
}
div.jp-playlist li div {
display:inline;
}
display:inline;
}
/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */
div.jp-type-playlist div.jp-playlist li:last-child {
padding:5px 0 5px 20px;
border-bottom:none;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
list-style-type:square;
list-style-position:inside;
padding-left:7px;
}
div.jp-type-playlist div.jp-playlist a {
color: #333;
text-decoration: none;
}
div.jp-type-playlist div.jp-playlist a:hover {
color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
color:#0d88c1;
}
padding:5px 0 5px 20px;
border-bottom:none;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
list-style-type:square;
list-style-position:inside;
padding-left:7px;
}
div.jp-type-playlist div.jp-playlist a {
color: #333;
text-decoration: none;
}
div.jp-type-playlist div.jp-playlist a:hover {
color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
float:right;
display:inline;
text-align:right;
margin-right:10px;
font-weight:bold;
color:#666;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media {
float:right;
display:inline;
text-align:right;
margin-right:10px;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a{
color:#666;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
color:#0d88c1;
}
span.jp-artist {
font-size:.8em;
color:#666;
}
float:right;
display:inline;
text-align:right;
margin-right:10px;
font-weight:bold;
color:#666;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media {
float:right;
display:inline;
text-align:right;
margin-right:10px;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a{
color:#666;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
color:#0d88c1;
}
span.jp-artist {
font-size:.8em;
color:#666;
}
/* @end */
div.jp-video-play {
width:100%;
overflow:hidden; /* Important for nested negative margins to work in modern browsers */
cursor:pointer;
background-color:rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
}
div.jp-video-270p div.jp-video-play {
margin-top:-270px;
height:270px;
}
div.jp-video-360p div.jp-video-play {
margin-top:-360px;
height:360px;
}
div.jp-video-full div.jp-video-play {
height:100%;
}
a.jp-video-play-icon {
position:relative;
display:block;
width: 112px;
height: 100px;
width:100%;
overflow:hidden; /* Important for nested negative margins to work in modern browsers */
cursor:pointer;
background-color:rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
}
div.jp-video-270p div.jp-video-play {
margin-top:-270px;
height:270px;
}
div.jp-video-360p div.jp-video-play {
margin-top:-360px;
height:360px;
}
div.jp-video-full div.jp-video-play {
height:100%;
}
a.jp-video-play-icon {
position:relative;
display:block;
width: 112px;
height: 100px;
margin-left:-56px;
margin-top:-50px;
left:50%;
top:50%;
margin-top:-50px;
left:50%;
top:50%;
background: url("jplayer.blue.monday.video.play.png") 0 0 no-repeat;
text-indent:-9999px;
}
div.jp-video-play:hover a.jp-video-play-icon {
background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
}
text-indent:-9999px;
}
div.jp-video-play:hover a.jp-video-play-icon {
background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
}
div.jp-jplayer audio,
div.jp-jplayer {
width:0px;
height:0px;
}
div.jp-jplayer {
width:0px;
height:0px;
}
div.jp-jplayer {
background-color: #000000;
}
background-color: #000000;
}
/* @group TOGGLES */
/* The audio toggles are nested inside jp-time-holder */
ul.jp-toggles {
list-style-type:none;
padding:0;
margin:0 auto;
overflow:hidden;
}
list-style-type:none;
padding:0;
margin:0 auto;
overflow:hidden;
}
div.jp-audio .jp-type-single ul.jp-toggles {
width:25px;
}
div.jp-audio .jp-type-playlist ul.jp-toggles {
width:55px;
margin: 0;
position: absolute;
left: 325px;
top: 50px;
}
width:25px;
}
div.jp-audio .jp-type-playlist ul.jp-toggles {
width:55px;
margin: 0;
position: absolute;
left: 325px;
top: 50px;
}
div.jp-video ul.jp-toggles {
margin-top:10px;
width:100px;
}
margin-top:10px;
width:100px;
}
ul.jp-toggles li {
display:block;
float:right;
}
display:block;
float:right;
}
ul.jp-toggles li a {
display:block;
width:25px;
height:18px;
text-indent:-9999px;
line-height:100%; /* need this for IE6 */
}
display:block;
width:25px;
height:18px;
text-indent:-9999px;
line-height:100%; /* need this for IE6 */
}
a.jp-full-screen {
background: url("jplayer.blue.monday.jpg") 0 -310px no-repeat;
margin-left: 20px;
}
background: url("jplayer.blue.monday.jpg") 0 -310px no-repeat;
margin-left: 20px;
}
a.jp-full-screen:hover {
background: url("jplayer.blue.monday.jpg") -30px -310px no-repeat;
}
background: url("jplayer.blue.monday.jpg") -30px -310px no-repeat;
}
a.jp-restore-screen {
background: url("jplayer.blue.monday.jpg") -60px -310px no-repeat;
margin-left: 20px;
}
background: url("jplayer.blue.monday.jpg") -60px -310px no-repeat;
margin-left: 20px;
}
a.jp-restore-screen:hover {
background: url("jplayer.blue.monday.jpg") -90px -310px no-repeat;
}
background: url("jplayer.blue.monday.jpg") -90px -310px no-repeat;
}
a.jp-repeat {
background: url("jplayer.blue.monday.jpg") 0 -290px no-repeat;
}
background: url("jplayer.blue.monday.jpg") 0 -290px no-repeat;
}
a.jp-repeat:hover {
background: url("jplayer.blue.monday.jpg") -30px -290px no-repeat;
}
background: url("jplayer.blue.monday.jpg") -30px -290px no-repeat;
}
a.jp-repeat-off {
background: url("jplayer.blue.monday.jpg") -60px -290px no-repeat;
}
background: url("jplayer.blue.monday.jpg") -60px -290px no-repeat;
}
a.jp-repeat-off:hover {
background: url("jplayer.blue.monday.jpg") -90px -290px no-repeat;
}
background: url("jplayer.blue.monday.jpg") -90px -290px no-repeat;
}
a.jp-shuffle {
background: url("jplayer.blue.monday.jpg") 0 -270px no-repeat;
margin-left: 5px;
}
background: url("jplayer.blue.monday.jpg") 0 -270px no-repeat;
margin-left: 5px;
}
a.jp-shuffle:hover {
background: url("jplayer.blue.monday.jpg") -30px -270px no-repeat;
}
background: url("jplayer.blue.monday.jpg") -30px -270px no-repeat;
}
a.jp-shuffle-off {
background: url("jplayer.blue.monday.jpg") -60px -270px no-repeat;
margin-left: 5px;
}
background: url("jplayer.blue.monday.jpg") -60px -270px no-repeat;
margin-left: 5px;
}
a.jp-shuffle-off:hover {
background: url("jplayer.blue.monday.jpg") -90px -270px no-repeat;
}
background: url("jplayer.blue.monday.jpg") -90px -270px no-repeat;
}
/* @end */
/* @group NO SOLUTION error feedback */
.jp-no-solution {
padding:5px;
font-size:.8em;
background-color:#eee;
border:2px solid #009be3;
color:#000;
display:none;
}
padding:5px;
font-size:.8em;
background-color:#eee;
border:2px solid #009be3;
color:#000;
display:none;
}
.jp-no-solution a {
color:#000;
}
color:#000;
}
.jp-no-solution span {
font-size:1em;
display:block;
text-align:center;
font-weight:bold;
}
font-size:1em;
display:block;
text-align:center;
font-weight:bold;
}
/* @end */
Rob Voyle
Oct 14, 2013, 5:45:14 PM10/14/13
to BartNKCMO, jpl...@googlegroups.com
Are you using both video and audio. I only use audio which simplified things
radically. I am not an expert on css and a radical novice on Java.
What I did was to start modifying one variable at a time, starting with the width,
to figure out which each does.
However once you resize things you may need to reposition other things.
This can get radically tricky expecially with the progress bar.
If you resize anything you will need to change the graphics. Blue Monday uses
one graphic which included all the elements that are then chosen such as:
graphic.
The end result is at:
http://www.appreciativeway.com/hope/hope.cfm
All I can say is it took a LOT of trial and error, and while I am happy with the
outcome I don't think I would spend that much time again.
Rob
Robert J. Voyle, Psy.D.
Director, Clergy Leadership Institute
For Coaching and Training in Appreciative Inquiry
Author: Restoring Hope: Appreciative Strategies
to Resolve Grief and Resentment
http://www.appreciativeway.com/
503-647-2378 or 503-647-2382
> --
> You received this message because you are subscribed to the Google
> Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to jplayer+u...@googlegroups.com.
> To post to this group, send email to jpl...@googlegroups.com.
> Visit this group at http://groups.google.com/group/jplayer.
> For more options, visit https://groups.google.com/groups/opt_out.
>
radically. I am not an expert on css and a radical novice on Java.
What I did was to start modifying one variable at a time, starting with the width,
to figure out which each does.
However once you resize things you may need to reposition other things.
This can get radically tricky expecially with the progress bar.
If you resize anything you will need to change the graphics. Blue Monday uses
one graphic which included all the elements that are then chosen such as:
background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;
I created separate graphics to use on mine rather than combine them all into one
graphic.
The end result is at:
http://www.appreciativeway.com/hope/hope.cfm
All I can say is it took a LOT of trial and error, and while I am happy with the
outcome I don't think I would spend that much time again.
Rob
Robert J. Voyle, Psy.D.
Director, Clergy Leadership Institute
For Coaching and Training in Appreciative Inquiry
Author: Restoring Hope: Appreciative Strategies
to Resolve Grief and Resentment
http://www.appreciativeway.com/
503-647-2378 or 503-647-2382
> You received this message because you are subscribed to the Google
> Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to jplayer+u...@googlegroups.com.
> To post to this group, send email to jpl...@googlegroups.com.
> Visit this group at http://groups.google.com/group/jplayer.
> For more options, visit https://groups.google.com/groups/opt_out.
>
Reply all
Reply to author
Forward
0 new messages