00:45
The player is wrapped in a <div> tag with id “frame1”. Here is the CSS used for styling:
#frame1
{
background: url('https://foliovision.com/images/2016/10/device-tv2.png') no-repeat;
background-size: 99%;
padding: 2.2% 2.4% 90px 2.3%;
max-width: 608px; /* same as the actual graphic width */
}
#frame1 .flowplayer
{
margin: 0;
}
You could use em units for the padding, but percentage is more reliable in terms of responsive design. And why is the background-size set to 99%? Because different browsers render differently and you could end up with 1px white line around your video.
