5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Please help with FlowPlayer

by Keith Price
4 replies
  • WEB DESIGN
    • |
I've got a video and want to use FlowPlayer.

Video is hosted on S3. Video plays fine, but I want it to fill a container DIV 100%. I can't figure out how to do that. I've toyed with different video sizes and different DIV sizes.

It always shows about a 1/4" white border on the Left, Right, and Bottom.

I tried setting this:

HTML Code:
.flowplayer {
   width: 638px;
   height: 358px;
}
No good.

So, I decided to fudge it by making a smaller DIV.

No good. The player just went smaller and still shows the 1/4" bars.

My video is 16:9 ratio, which is the default, so I don't think it's forcing a scale.

It's probably hard for you to troubleshoot this w/o seeing the page, but I'm hoping you know of an obvious or simple solution that I'm overlooking.

Thanks!
#flowplayer
  • Profile picture of the author meepo
    PM sent. Please check your inbox.
    {{ DiscussionBoard.errors[8714308].message }}
  • Profile picture of the author Keith Price
    I really appreciate the help, via PM, from both Meepo and Brandon. Brandon's solution worked best for me. Here's what finally worked:

    HTML Code:
    <!-- For FlowPlayer -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
     
    <!-- 2. flowplayer -->
    <script src="flowplayer.min.js"></script>
     
    <!-- 3. skin -->
    <link rel="stylesheet" href="skin/minimalist.css">

<style type="text/css">
    body {
		background-color: #a1c7d4;
	}
   .flowplayer { 
   		width: 100%; 
	}
	.flowplayer .fp-engine, .flowplayer .fp-ui, .flowplayer .fp-message {
		position: relative !important;
		width: 100%;
	}
</style>

<!-- End FlowPlayer -->
    Part of the solution was to bring the flowplayer script local, but that was probably just a performance improvement.

    I also needed to add this to the CSS for the container DIV:

    HTML Code:
    	background: url(images/welcome-end.png) 0 0 no-repeat;
    Thanks, guys!
    Signature

    Keith Price

    {{ DiscussionBoard.errors[8716344].message }}
  • Profile picture of the author meepo
    cool glad it worked out! brandon's solution is simpler than mine, with 1 line of edits instead of my 3 lines of edits lols
    {{ DiscussionBoard.errors[8716391].message }}

Trending Topics