Integrating the *Plugin SDK with an embedded YouTube player is simple. First, grab an embed code for your video from YouTube using the "Embed" button. It should look something like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/mTOYClXhJD0" frameborder="0" allowfullscreen></iframe>
You must add ?enablejsapi=1 to the end of the src code that youtube generates. Your embed code should now look something like the following:
<iframe width="560" height="315" src="https://www.youtube.com/embed/mTOYClXhJD0?enablejsapi=1 " frameborder="0" allowfullscreen></iframe>
Next, wrap the iframe in your P3SDK div, and include the YouTube iframe API link (highlighted in pink).
<div class="p3sdk-container p3sdk-debug" player_id="yt-player1" player_type="youtube">
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
<iframe id="yt-player1" width="560" height="315" src="http://www.youtube.com/embed/mTOYClXhJD0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
Finally, add an id to the iframe embed that matches the player_id in your P3SDK div (highlighted in yellow):
<div class="p3sdk-container p3sdk-debug" player_id="yt-player1" player_type="youtube">
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
<iframe id="yt-player1" width="560" height="315" src="http://www.youtube.com/embed/mTOYClXhJD0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
*The Plugin SDK is sometimes referred to as "P3SDK".
0 Comments