WordPress + JW Player + Ad Overlay = Money
Collapse
X
-
-
Here's one I did for a site not too long ago... This one shows the ads on pause and when the video ends... It won't show when embedded on another site.. but with a little research you can figure out how to add the html inside the js functions so that it will...
CSS: (this WILL need to be modified based on your side layout/config)
#player-content {
display: none;
position: absolute;
width: 640px;
height: 447px;
background-color: #000;
padding: 0;
margin: 35px 0 0 20px;
opacity: 0.95;
text-align: left;
}
#player-content-banner {
position: absolute;
bottom: 75%;
width: 661px;
text-align: center;
}
------------------------------
Player:
<div id="player"></div>
<div id="player-content">
<div id="player-content-banner">
<div style="position: relative; top: 160px;">
AD CONTENT HERE
</div>
</div>
</div>
<script type="text/javascript" src="/player/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
$(function()
{
$('#icon-resume').click(jwResume);
$('#icon-replay').click(jwReplay);
});
jwplayer('player').setup({
flashplayer: '/player/jwplayer/player.swf',
id: 'jwplayer',
width: '640',
height: '480',
skin: '/player/jwplayer/glow.zip',
file: 'url/to/video',
autostart: 'true',
provider: 'video',
events:
{
onPause: jwOnPause,
onPlay: jwContentHide,
onComplete: jwOnFinish
}
});
function jwResume()
{
jwplayer()
.play(true);
}
function jwReplay()
{
jwplayer()
.playlistNext();
}
function jwOnFinish()
{
$('#icon-replay').show();
$('#icon-resume').hide();
jwContentShow();
}
function jwOnPause()
{
$('#icon-resume').show();
$('#icon-replay').hide();
jwContentShow();
}
function jwContentHide()
{
$('#player-content')
.hide();
}
function jwContentShow()
{
var position = $('#player').position();
$('#player-content')
.css({top: position.top + 'px', left: position.left + 'px'})
.show();
}
</script>Comment
-
I wish I had a stronger understanding of java script.Here's one I did for a site not too long ago... This one shows the ads on pause and when the video ends... It won't show when embedded on another site.. but with a little research you can figure out how to add the html inside the js functions so that it will...
CSS: (this WILL need to be modified based on your side layout/config)
#player-content {
display: none;
position: absolute;
width: 640px;
height: 447px;
background-color: #000;
padding: 0;
margin: 35px 0 0 20px;
opacity: 0.95;
text-align: left;
}
#player-content-banner {
position: absolute;
bottom: 75%;
width: 661px;
text-align: center;
}
------------------------------
Player:
<div id="player"></div>
<div id="player-content">
<div id="player-content-banner">
<div style="position: relative; top: 160px;">
AD CONTENT HERE
</div>
</div>
</div>
<script type="text/javascript" src="/player/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
$(function()
{
$('#icon-resume').click(jwResume);
$('#icon-replay').click(jwReplay);
});
jwplayer('player').setup({
flashplayer: '/player/jwplayer/player.swf',
id: 'jwplayer',
width: '640',
height: '480',
skin: '/player/jwplayer/glow.zip',
file: 'url/to/video',
autostart: 'true',
provider: 'video',
events:
{
onPause: jwOnPause,
onPlay: jwContentHide,
onComplete: jwOnFinish
}
});
function jwResume()
{
jwplayer()
.play(true);
}
function jwReplay()
{
jwplayer()
.playlistNext();
}
function jwOnFinish()
{
$('#icon-replay').show();
$('#icon-resume').hide();
jwContentShow();
}
function jwOnPause()
{
$('#icon-resume').show();
$('#icon-replay').hide();
jwContentShow();
}
function jwContentHide()
{
$('#player-content')
.hide();
}
function jwContentShow()
{
var position = $('#player').position();
$('#player-content')
.css({top: position.top + 'px', left: position.left + 'px'})
.show();
}
</script>ISeekGirls.com since 2005Comment
-
I honestly know very little about js... I'm just good at RTFM'ing and googling... sometimes spend days working on some code til it's just right.
I think that one I posted above took me a good 6 hours to figure out lolComment
-
Same here...
I had to fix my broken server once because my sys admin was on vacation.ISeekGirls.com since 2005Comment
-
ThanksThe theme is one of my favorites in the market today.
WooThemes CANVAS
The theme has everything you want built in and it is also light on the server.
HTML5, Google Fonts, Widgets galore, etc.
The theme is also easy to style from the admin area.
gfynicky @ gmail.comComment
-
Comment
-
Does it work with flowplayer, too? Need a similar solution for flowplayer.Comment


Comment