JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Displaying A YouTube Video as an Overlay
with Wide then Tall Zoom Effect

Version 1 | Version 2 | Version 3 | Version 4 | Version 5

Here's a way you can display a YouTube video as an OVERLAY (on top of) your webpage

Click this text link to see example of the video overlay

Or click on image above to see video overlay

Here's the code that makes this work:

Scripts needed (copy and paste inside <head> tag just below the <title> tag)


<!--CHECK that you only have ONE of each line below. NO DUPLICATES. You may already have it in your <head>-->
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/css-transform.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/animate-css-rotate-scale.js"></script>

<!--UNIQUE scripts for this particular video display-->
<script type="text/javascript" src="https://www.freestyleacademy.rocks/Scripts/videoDisplay2.js"></script>
<link href="https://www.freestyleacademy.rocks/styles/videoDisplay853x480.css" rel="stylesheet" type="text/css">

This assumes the video you want to show has the standard HD video dimensions of 853x480 pixels.

If your video is 720x480, change the last line above to
     <link href="https://www.freestyleacademy.rocks/styles/videoDisplay720x480.css" rel="stylesheet" type="text/css">

If your video is 640x480, change the last line above to
      <link href="https://www.freestyleacademy.rocks/styles/videoDisplay640x480.css" rel="stylesheet" type="text/css">

If your video is some other video dimension, create an internal style sheet that is BELOW the
      <link href="https://www.freestyleacademy.rocks/styles/videoDisplay853x480.css" rel="stylesheet" type="text/css"> line with the following
#displayBox {
     width: ###px;
     height: ###px;
}

Of course, change the ### with the custom dimensions you want.

Check out the javascript if you wish

HTML (copy and paste just ABOVE the last </html> tag at the bottom of the HTML)


<div id="overlayBox"></div>
<div id="displayBox">
<div id="closeX">X</div>
<div id="displayBoxContentHolder">
<iframe id="vidPlayer"
width="853"
height="480"
src="https://www.youtube.com/embed/DWAFukXS58Q?rel=0&amp;html5=1&amp;&enablejsapi=1"
frameborder="0"
allowfullscreen>
</iframe>
</div>
</div>

About the above code:

  1. This assumes the video you want to show has the standard HD video dimensions of 853x480 pixels.
    • If your video is 720x480, change the above code with width:"720".
    • If your video is 640x480, change the above code with width:"640".
    • If your video is some other video dimension, change the above code with width:"###" and height:"###". Of course, change the ### with the custom dimensions you want.
  2. You MUST modify the src="https://www.youtube.com/embed/DWAFukXS58Q?rel=0&amp;html5=1&amp;&enablejsapi=1" to src="https://www.youtube.com/embed/YouTube_code_for_your_target_video?rel=0&amp;html5=1&amp;&enablejsapi=1" which you get from YouTube
  3. URL Parameters ?rel=0&amp;html5=1&amp;&enablejsapi=1 What's all this for anyway?
    • rel=0 will force YouTube to NOT show a grid of related video thumbnail links after your video is done
    • html5=1 will force YouTube to display your video as HTML5 video (no browser plug-in required) rather than a Flash video (which requires Flash Player browser plug-in to be installed and active on the user's computer)
    • enablejsapi=1 allows for more advanced javascript API code to manipulate the video if needed (such as external buttons to stop/pause/play/etc.)
    • &amp; is HTML code for a & symbol that separates unique URL parameters


More HTML - modify the link to trigger the video to be shown when clicked


<a href="#"
id="showYouTubeVideoLink"
>Text or image link</a>

It's very important that the <a href="#"> link must have id="showYouTubeVideoLink" so that the scripts know to act when the link is clicked. The id is the trigger to put everything in motion.

X