API
Side by Side Youtube Videos with javascript controls on the same page!
Here is the beginning of interactivity — 2 youtube players that can be controlled separately from the same page. Click the links under the videos.
The possibilities are endless.
Code to follow — hint was not to enable the api twice.
Enjoy,
Marcos
Youtube embedded player API code
Here is the code for embedding a youtube player that can be controlled with javascript.
You can visit the page for developers here.
Enjoy,
Marcos
<div id="ytplayer"></div>
<script type="text/javascript">
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
// place your youtube videoID here
events: {
'onReady': onPlayerReady
// 'onReady' will execute a function when the player is loaded
}
})
}
function onPlayerReady(){player.playVideo()}
// function that plays video
// ]]></script>
<button onclick="onPlayerReady()">play</button>
<!-- calls function that affects player -->
Embed Youtube API HTML5 Player in WordPress using iframe and retaining fullscreen button
OBJECTIVE: Use the cool features of Youtube’s API in wordpress
CHALLENGE: embedding youtube directly loses the API features. Embedding with iframe retains API features but loses the fulscreen button (at least in chrome)
SOLUTION: Create web page with API; use the blank parameter allowfullscreen=”” ; optional, set frameborder=”0″
Below is a youtube video with custom buttons that affect the video. Once buttons can be made then the sky is the limit for creating a wonderfully interactive experience.
Stay tuned and enjoy,
Marcos