CODEWITHSUNDEEP
htmlcssgoogle-chrome
user285594
user285594

Reputation:

Google Chrome - how to make the video element exactly fitted into the layout?

I have to rotate 3 deg the box to fit with layout white box. But when i apply rotate the borders of the video element is not smooth line how to fix it so that the borders are straight and it fits exactly 3 degree with the background layout?

enter image description here

(screen shot shows the white box by graphics designer the main layout, black box is the video container which is not fitting with the white box)

<!DOCTYPE html> 
<head>
  <style>
    body {
      margin: 0px;
      padding:0px;
/*      overflow: hidden;*/
    }

    #lefttop {
  position: absolute;
  top: 495px;
  left: 57px;
  transform: rotate(3deg);
    }
  </style>
</head>
<html> 
<body > 

  <div id="portrait">
    <img src="images/sp_3/1.gif" />
  </div>


  <video id="lefttop" width="300" height="300">
    <source src="mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>

</body> 
</html>

EDIT: video element has to completely fit in white area (not like as it is now)

Upvotes: 0

Views: 70

Answers (1)

Mr Lister
Mr Lister

Reputation: 46579

It will work very nicely if you dispense with the background image gif and just remake the whole thing in CSS.

.container {
  margin: 0 auto;
  width:377px; height:314px;
  background-image: radial-gradient(circle at 360px 157px, #EFA849 0, #D47339 100%);
}
#lefttop {
  width:300px; height:226px;
  display:block;
  margin:0 auto;
  background-color:black;
  box-shadow:4px 4px 5px #7D4B22;
  transform:rotate(3deg);
  transform-origin:-280px 180px;
}
<div class="container">
   <video id="lefttop">
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
     <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
     Your browser does not support HTML5 video.
   </video>
</div>

(Note that I changed the dimensions to fit the size of your screen shot; you may have to changed them back to what you need them to be; it's unclear from your source what the actual sizes are.)

Upvotes: 1

Related Questions