Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Better control over embedded youtube video

Posted on 2010-08-18
3
Medium Priority
?
224 Views
Last Modified: 2012-05-10
Here is what the customer is wanting.  They want to display a 'specific' graphic on their page and when the user clicks on the graphic (one click), it will then show the embedded youtube video and start playing it in the position the graphic was located.  I asked a similiar question and was given a response that almost worked...but it requires two clicks (video doesn't start immediately).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      $("#image").click(function(){
            $(this).hide();
            $("#video").show();
      });
});
</script>
</head>
 
<body>
 
<img id="image" src="http://williamsexperttreeservice.com/beautiful_tree_1.jpg" width="640" height="385" alt="img" />
<div id="video" style="display:none;">
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/OuRQMc0Sm48?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OuRQMc0Sm48?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
</div>
</body>
</html>
0
Comment
Question by:cenetadmin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 

Author Comment

by:cenetadmin
ID: 33464004
I assume I need to set the embedded code autoplay = 1 but I would guess I need to do that through the javascript otherwise the video would play when the page loads.
0
 
LVL 3

Accepted Solution

by:
grantunwin earned 2000 total points
ID: 33465480
Use the follwoing code instead with autoplay enabled:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
      $("#image").click(function(){
            $(this).hide();
            $("#video").show();
      });
});
</script>
</head>
 
<body>
 
<img id="image" src="http://williamsexperttreeservice.com/beautiful_tree_1.jpg" width="640" height="385" alt="img" />
<div id="video" style="display:none;">
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/OuRQMc0Sm48?fs=1&amp;hl=en_US&amp;autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OuRQMc0Sm48?fs=1&amp;hl=en_US&amp;autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:cenetadmin
ID: 33512860
thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question