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
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&html5=1&&enablejsapi=1"
frameborder="0"
allowfullscreen>
</iframe>
</div>
</div>
About the above code:
- 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.
- If your video is 720x480, change the above code with width:"720".
- You MUST modify the src="https://www.youtube.com/embed/DWAFukXS58Q?rel=0&html5=1&&enablejsapi=1" to src="https://www.youtube.com/embed/YouTube_code_for_your_target_video?rel=0&html5=1&&enablejsapi=1" which you get from YouTube
- URL Parameters ?rel=0&html5=1&&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.)
- & 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.