How to play youtube video in background in HTML or PHP.

Question

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 21-Jun-12 0:06am

ranjeet.waje

Updated 9-Dec-19 12:09pm

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Farhan Ghumra · Answer 1 · 2012-06-21T03:23:00

Solution 1

How to set a YouTube video as your website background[^]

Creative Use of Video in Web Design: Background Videos[^]

Posted 21-Jun-12 3:23am

Farhan Ghumra

Member 14683876 · Answer 2 · 2019-12-09T12:07:00

Solution 2

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

Posted 9-Dec-19 12:07pm

Member 14683876

Updated 9-Dec-19 14:17pm

Member 14683876 · Answer 3 · 2019-12-09T12:09:00

Solution 3

<!-- 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>

Posted 9-Dec-19 12:09pm

Member 14683876

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.