-
I have a autolooping playlist that I want to display inside a branded tv screen graphic. I cannot find the .css info on this. You display an example on the FV Player plugin settings. Appreciate some help.
-
-
Hello William,
I’ve passed this question to our design department and they will reply to you shortly with some tips on how to customize the border around the video in CSS.
Thanks,
Eduard
Hello William,
I wouldn’t use border-image in CSS, as it has many issues and the results might be different in each browser. And since it’s important, that the video fits nicely into the graphic, it would be best to wrap it in a DIV that has your custom background. Than you can use background-size: cover; so it spreads nicely around the whole player. Since you know the size of the player, you can easily create that graphic to fit pixel perfect. The wrapping DIV itself can include some padding around, this way you can center the player vertically and horizontally.
thanks
vk
Hi William,
Here’s an example on our page – Custom Frame in Background. It also includes the used the sample of the code used for styling.
Thanks,
Eduard
Hi William,
Here is also a full guide in our FV Player Documentation – How to Make a Frame Around Video.
Thanks,
Eduard
Thanks, it was helpful. The added fun was that the player had to be viewed at an angle and with perspective. No parallel sides. So the below worked. Can’t include the image used, but you’ll get the idea. Enjoy !!
<div id=”hv1″>
<style>
#hv1 {
position: relative;
background-image: url(‘//cdn.foliovision.com/media/backgrounds/Waiting_Room.png’);
height: 405px;
width: 720px;
}
#hv2 {
position: relative;
top: 33px;
left: 455px;
height: 96px;
width: 152px;
-ms-transform: rotate(-2.5deg); /* IE 9 */
-webkit-transform: rotate(-2.5deg); /* Safari */
transform: rotate(-2.5deg); /* Standard syntax */
}
#hv3 {
height: 96px;
width: 152px;
-webkit-perspective: 19px; /* Chrome, Safari, Opera */
perspective: 19px;
}
#hv4 {
position: relative;
height: 96px;
width: 152px;
-webkit-transform: rotateY(-.65deg); /* Chrome, Safari, Opera */
transform: rotateY(-.65deg);
}
</style><div id=”hv2″>
<div id=”hv3″>
<div id=”hv4″>[fvplayer src="/media/stuff,mp4" width="152" height="96" autoplay="true" liststyle="prevnext" controlbar="no" loop="true" playlist="https://cdn.foliovision.com/media/stuff2.mp4" hflip="true"]</div>
</div>
</div>
</div>
Please move the <div id=”hv1″> from top to above <div id=”hv2″>
Bill
Hi William,
Great, thanks for sharing!
Thank you,
Eduard
