Difference between revisions of "Team:AFCM-Egypt"

Line 2: Line 2:
  
 
<html>
 
<html>
−
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
−
<script type="text/javascript">
 
−
    /* Script to find all MLB IFRAMES on a page and wrap them in a DIV so that they can be styled to be responsive */
 
−
   
 
−
 
 
−
    $(document).ready(function () {
 
−
        $('iframe[src*="m.mlb.com"]').wrap('<div class="mlbWrapper" />');
 
−
    });
 
−
    </script>
 
  
 
<style>
 
<style>
 
   
 
   
−
/* Responsive IFRAME Embed Encoding
+
#video-bg {
−
    Adapts fixed pixel IFRAME sizes and makes them responsive. */
+
  position: relative;
−
+
  width: auto;
−
+
  min-width: 100%;
−
/* First, define the common wrapper elements
+
  height: auto;
−
    Padding-top is for the fixed height header of the embedded content */
+
  background: transparent url(video-bg.jpg) no-repeat;
−
+
   background-size: cover;
−
.mlbWrapper {
+
−
    position: relative;
+
−
    padding-top: 30px; height: 0; overflow: hidden;
+
−
}
+
−
+
−
+
−
/* Set the padding-bottom for 16:9 aspect ratio video  */
+
−
.mlbWrapper{
+
−
    padding-bottom: 56.25%;     
+
−
}
+
−
+
−
+
−
   
+
−
/* Set the IFRAME to be top left and occupy 100% of width and height of the containing DIV wrapper */   
+
−
.mlbWrapper iframe,
+
−
  {
+
−
    position: absolute;
+
−
    top: 0;
+
−
    left: 0;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
}
+
−
 
+
−
.full-width {
+
−
  width: 100vw;
+
−
   height: 300px;
+
−
  margin-bottom: 40px;
+
−
 
+
 
}
 
}
−
video{
+
video {
−
position:absolute
+
  display: block;
−
top:50%
+
−
left:50%
+
−
transform:translate(-50%,-50%)
+
−
z-index:1
+
−
min-width:100%
+
−
min-height:30%
+
−
width:auto
+
−
 
+
−
backgroud:transparent
+
 
}
 
}
−
+
.video-container {
−
</style>
+
  width: 100%;
 +
  max-height: 600px;
 +
  overflow: hidden;
 +
  position: fixed;
 +
  top: 0;
 +
  right: 0;
 +
  z-index: -100;
 +
}
 +
</style>
 
<div class="container-fluid" style="margin-top:80px">
 
<div class="container-fluid" style="margin-top:80px">
 
</div>
 
</div>
−
<div class="full-width">
+
<div class="video-container">
−
<video> <source src="https://static.igem.org/mediawiki/2017/8/85/DNA_Background_Video_Ruslan_2.mp4"> </video>
+
  <video autoplay loop muted id="video-bg">
 +
 
 +
    <source src="https://static.igem.org/mediawiki/2017/8/85/DNA_Background_Video_Ruslan_2.mp4" type="video/mp4" />
 +
 
 +
  </video>
 
</div>
 
</div>
−
<div class="clear"></div>
+
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 21:48, 15 August 2017