Click here to Skip to main content
15,849,615 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Dear All,

I want to play youtube vedio(Fullscreen) in background and above that video want to display another html page. But front html page must be tanseperent.

Below is my HTML page. But it has problem.But in this, I am not able to see Video in background.

XML
<html>
<head>
 <style type="text/css">
    body{
      background: #000;
      margin:0;
      color:#fff;
      font-size:12px;
      font-family: tahoma, arial;
    }
   div.transbox
  {
  width:400px;
  height:400px;
  margin:130px 150px;
  background-color:black;
  border:1px solid black;
  opacity:0.9;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
    .movie{
      display:none;
    }

    .content{
      width:900px;
      position:relative;
      top:100px;
      margin:0 auto;
    }

    p{
      margin-bottom:15px;
      padding:10px;
    }

    #bgndEl{
      position:relative;
      margin:0 auto;
      width:900px;
      height:400px;
      background: #000;
      opacity:0.4;
      filter:alpha(opacity=40);
    }

    h1{
      font-size:24px;
      font-weight:bold;
    }
  </style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="inc/jquery.metadata.js"></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>
<script type="text/javascript">
    $(function(){
      $(".movie").mb_YTPlayer();
    });
</script>

 <div class="content">

 <div id="bgndEl" style="border:2px solid white;">
<p>
     <iframe src="C:\Documents and Settings\bidhu\Desktop\svg\1.html" width="400px" height="400px"></iframe>
</p>
 </div>
<a id="bgndVideo" href="http://www.youtube.com/watch?v=3xaG882IJ44" class="movie {opacity:.40, isBgndMovie:{width:900,mute:true}, ID:'bgndEl', ratio:'16/9',quality:'default'}">
        </a>
 </div>
 </body>
</html>



Please help me and show me if there is any error in code.
Thanks in advance.

Ranjeet Waje
Posted
Updated 9-Dec-19 13:09pm

Z-index: -1; // everything on top of video would get z-index:0 on top of that z-index:1, etc
Position: absolute;
Min-Width:100%; //width of the screen no matter what size
Min-Height: 100%; //height of the screen no matter what size
 
Share this answer
 
<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>

<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
  <!-- Use a button to pause/play the video with JavaScript -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>
 
Share this answer
 
Comments
Dave Kreskowiak 9-Dec-19 18:46pm    
This plays a local video, not one from YouTube.

An unexplained code snippet is not an answer.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900