In addition to Matyas' response, I have made some modifications to his code to ensure it can be fully implemented.
Before delving into the details, please check out the demo:
As you can observe, I dynamically set the widths and heights so that the overlayDiv is perfectly centered within the iFrame.
Feel free to adjust the width and height of the overlayDiv as needed, and the script will automatically adapt the start button's position.
It's crucial to maintain the following HTML structure for successful implementation:
<div id="vidFrame" class="play">
<iframe id="video" class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/-PZLM-CmuJ0?wmode=opaque&hd=1&rel=0&autohide=1&showinfo=0&enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="overlayDiv">
<img src="https://www.ameliaconcours.org/UploadedContent/Lamborghini%20Logo_Crest_4C_S.png" alt="facebook" width="90px" />
</div>
The width and height of vidFrame do not need to be predefined since they will match the iFrame's dimensions.
Additionally, pay attention to these specifics:
wmode=opaque should be the first parameter in the video URL- We enable
enablejsapi=1 to control video playback
The jQuery function used is as follows:
$.fn.loadOverlay = function() {
$('iframe').each(function(idx, iframe){
var imageHeight = $('.overlayDiv').height();
var imageWidth = $('.overlayDiv').width();
var marginTop = $('#video').height();
var marginTop = marginTop/2-imageHeight/2;
var marginLeft = $('#video').width();
var marginLeft = marginLeft/2-imageWidth/2;
$('.overlayDiv')
.clone()
.appendTo('body')
.css({
top: marginTop,
left: marginLeft,
}).show();
});
}
While lengthy, this calculation explicitly centers the overlay within the iFrame. Shorter methods are feasible, but this one provides clarity on the process.
Moreover, note that yt players typically display a red play button at the center when loading a video.
To remove this button, utilize the following trick:
function onPlayerReady(event){
//THIS IS THE TRICK THAT YOU MIGHT WANT TO REMOVE
player.playVideo();
player.pauseVideo();
}
This method involves playing and immediately pausing the video to eliminate the button. However, please be aware that this technique does not function on mobile devices. It does offer the benefit of initiating video buffering automatically, enhancing user experience.
Lastly, the jsFiddle example is self-explanatory, so take your time to review and grasp the concept.
I trust this addresses your query. Best of luck!