Example code: disabling Flash link to YouTube on embedded videos

Submitted by Phillip G (not verified) on Sat, 2008-04-05 03:52.

This was a great solution, thanks bart! In response to George's question, here is the code I came up with that works great. I put all the formatting in the stylesheet, so I can just add some div layers quickly in the body of the document.

ALSO, I did NOT use the "autoplay" code, since I have several videos on my page and don't want them to play automatically. In addition, I opted to make a "frame" of div layers, so the user can still click on the center "play" button to start the video. The downside is that after the video is started, the user could still click the center and end up on YouTube, but I think it's an acceptable compromise.

Hopefully this code will post ok. Please note you'll need to change the [ and ] to < and >, respectively. See it work and view the source at www.perfectpocketpets.com. Click on "Thinking about getting a sugar glider" and it will take you to the questions page. You can see it in action there. Enjoy!
- Phillip
####### SAMPLE CODE ########
<style type='text/css'>
.vidOverlayContainer {
position:relative;
width:300px;
height:1px;
}

.vidOverlayTop {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
top:0px;
left:0px;
width:300px;
height:100px;
background-color:#FF0000;
z-index:3;
}

.vidOverlayLeft {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
top:100px;
left:0px;
width:125px;
height:30px;
background-color:#0000FF;
z-index:3;
}

.vidOverlayRight {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
top:100px;
right:0px;
width:125px;
height:30px;
background-color:#0000FF;
z-index:3;
}

.vidOverlayBottom {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
top:130px;
left:0px;
width:300px;
height:100px;
background-color:#FF0000;
z-index:3;
}
</style>

<div class='vidOverlayContainer'>
   <div class='vidOverlayTop'></div>
   <div class='vidOverlayLeft'></div>
   <div class='vidOverlayRight'></div>
   <div class='vidOverlayBottom'></div>
</div>
<object width='300' height='251'... YOUTUBE EMBED CODE CONTINUES HERE...>

####### END SAMPLE CODE #######
Hope that works ok. Enjoy!

Reply

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <img> <h2> <h3> <h4> <b>
  • Lines and paragraphs break automatically.
  • Images can be added to this post.
  • You may use [inline:xx] tags to display uploaded files or images inline.

More information about formatting options

1 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.