Looking to integrate a Youtube video using the iFrame API to capture events effectively, embedding the player alone is not an option.
Following the documentation, everything functions correctly with code like:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
if($("#video_1").length){
player = new YT.Player('video_1', {
videoId: 'BmsPsdVmkSw',
playerVars: { 'autoplay': 1, 'controls': 0, 'info': 0, 'rel': 0, 'wmode': 'transparent' },
events: {
'onStateChange': goToVS
}
});
}
An issue arises when attempting to adjust the video to fit various screen widths for mobile devices and tablets. CSS adjustments like below:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Along with scripts such as those found at http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php have been attempted without success. These methods function well with standard Youtube embed codes but not with the iFrame API.
Open to suggestions or solutions!
Thank you!