Surprisingly YouTube still don’t have a way to easily embed only your latest YouTube video onto your site so that every time you upload a new video it automatically updates on your site.
This tutorial will show you how to embed your latest video (or random) from YouTube to Blogger so it automatically updates.
"This script also work on any site with javascript support"
add a gadget on blogger layout, enter this html code
<iframe id="youtube-frame" style="width:230px"; height: 150px;" frameborder="0" allowfullscreen></iframe>
then add this script bellow that html code:
fullscript :
<script>
function frx_ytb_show(autoPlay, videoID) {
var youtube = document.getElementById("youtube-frame");
if (youtube) {
youtube.setAttribute("id", videoID);
youtube.style["position"] = "relative";
if (autoPlay) youtube.setAttribute("src", "https://www.youtube.com/embed/" + youtube.id + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");
else youtube.setAttribute("src", "https://www.youtube.com/embed/" + youtube.id + "?autohide=1&border=0&wmode=opaque");
}
}
function randomRange(l, h) {
var range = (h - l);
var random = Math.floor(Math.random() * range);
if (random === 0) { random += 1; }
return l + random;
}
$(document).ready(function() {
var randomID = randomRange(5,0);
$.get(
"https://www.googleapis.com/youtube/v3/search",{
part : 'snippet',
channelId : 'YOUR CHANNEL ID',
type : 'video',
key: 'YOUR YOUTUBE KEY'},
function(data) {
$.each( data.items, function( i, item ) {
if(i == randomID){ frx_ytb_show(false, item.id.videoId); }
})
}
);
});
</script>
explanation :
1. Script to show youtube frame
<script>
function frx_ytb_show(autoPlay, videoID) {
var youtube = document.getElementById("youtube-frame");
if (youtube) {
youtube.setAttribute("id", videoID);
youtube.style["position"] = "relative";
if (autoPlay) youtube.setAttribute("src", "https://www.youtube.com/embed/" + youtube.id + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");
else youtube.setAttribute("src", "https://www.youtube.com/embed/" + youtube.id + "?autohide=1&border=0&wmode=opaque");
}
}
</script>
2. Script to Get Random Number
<script>
function randomRange(l, h) {
var range = (h - l);
var random = Math.floor(Math.random() * range);
if (random === 0) {
random += 1;
}
return l + random;
}
</script>
3. Script to get the list video from your channel and randomly show one video on the gadget.
<script>
$(document).ready(function() {
var randomID = randomRange(5,0);
$.get(
"https://www.googleapis.com/youtube/v3/search",{
part : 'snippet',
channelId : 'YOUR CHANNEL ID',
type : 'video',
key: 'YOUR YOUTUBE KEY'},
function(data) {
$.each( data.items, function( i, item ) {
if(i == randomID){ frx_ytb_show(false, item.id.videoId); }
})
}
);
});
</script>
note :
- replace "YOUR CHANNEL ID" with you channel id
- replace "YOUR YOUTUBE KEY" with your youtube key
this is the video how to get your youtube api key v3
4. you need to add jquery library for the function number 3. add this to blogger your html template inside <head></head> tag :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
here is the complete video tutorial on youtube :
Post a Comment