function changeIframeSrc(index){
var iframeid = document.getElementByID('changingIframe');
iframeid.setAttribute('src', sourceList[index]);
}
var i = 0;
var sourceList = ['111.php', '222.php', '333.php'];
setInterval(function(){ changeIframeSrc(i++);
// loop properly
if(i == sourceList.length){ i = 0; }
}, 10000);
<iframe id="changingIframe" src="" scrolling="no" width="100%" height="87%"></iframe>
<html>
<body>
<div class="wrapper">
<iframe id="111" src="111.php" scrolling="no" width="100%"></iframe>
<iframe id="222" src="222.php" scrolling="no" width="100%"></iframe>
<iframe id="333" src="333.php" scrolling="no" width="100%"></iframe>
<iframe id="bottom_banner" src="bottom_banner.php" scrolling="no" width="100%"></iframe>
</div>
</body>
I want my page to change between pages 111,222,333 on a loop every 10 seconds.
I could use etc. on each page but my banner keeps duplicating on each loop. (therefore stacking up)
I want to keep my banner at the bottom at all times. I want my pages to take up 80% of the height and the banner to take up the 20% left over.
You could use Javascript/jQuery to change the source of the iframe that keeps changing source
So
function changeIframeSrc(index){
var iframeid = document.getElementById('changingIframe');
iframeid.setAttribute('src', sourceList[index]);
}
and then
var i = 0;
var sourceList = ['111.php', '222.php', '333.php', etc];
setInterval(function(){ changeIframeSrc(i++);
// loop properly
if(i == sourceList.length){ i = 0; }
}, 10000);
Related
I have used the vimeo generated code to embed my video in a wix website (using their HTML component tool). I've tweaked the code so it autoplays when the page loads, and it is responsive on resizing the browser window (plus full width on the webpage). The code used is:
<div style="padding:42.6% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/558081433?autoplay=1&muted=1&loop=1&autopause=0"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Anthemic Piano">
</iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
I saw someone use some neat code to add an unmute button to their video, but the code generates a very small video area on the website, rather than the full width, responsive version I'm trying to get. Here is the code they used:
<button onclick="unmute()">
UNMUTE
</button>
<div id="vimeo-player1"> </div>
<script>
var options = {
id: 194500280,
background: true
};
var vid1 = new Vimeo.Player('vimeo-player1', options);
</script>
<script>
function unmute() {
vid1.setVolume(1);
};
</script>
I tried adding in
width: 100%
to the var options = {} part of the code, but this doesn't work to make it responsive/full width.
I'd be incredibly grateful if someone was able to help amalgamate my original code, with the unmute button code so I can finally get it working. Thank you so much for your help with this.
Setting the CSS width for container and iframe must help. The code below shows the video in full-width and UNMUTE button works as expected.
<style>
.container {
height:95%;
width:100%;
}
.container iframe{
width: 100%;
height: 100%;
}
</style>
<script src="https://player.vimeo.com/api/player.js"></script>
<div class="container" id="vimeo-player1"> </div>
<button onclick="unmute()">
UNMUTE
</button>
<script>
var options = {
id: 558081433,
background: true,
muted:1,
loop:1
};
var vid1 = new Vimeo.Player('vimeo-player1', options);
vid1.play();
</script>
<script>
function unmute() {
vid1.setVolume(1);
};
</script>
I want to show one out of two iframe, according to user OS.
if user use iOS it shows one and if androind it show other.
<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>
you could detect userAgent in Javascript, like this.
<html>
<body>
<div id="vectary"></div>
<script>
function getOs() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
//Vectary iframe 1 - for Android
return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
}
// iOS detection from: http://stackoverflow.com/a/9039885/177710
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
//Vectary iframe 2 - for iOS
return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
}
//Vectary iframe 3 - for all other cases
return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
}
document.getElementById("vectary").innerHTML = getOs();
</script>
</body>
</html>
I am trying to display the lastest five videos from my youtube channel on one HTML page. I have managed to successfully embed one youtube video with this code but I am unable to upload any other one. I have tried to embed the second latest video as well but no matter what I try, I get a playback error with invalid ID as seen above. Does anyone have a clue how I could embed the latest 5 videos from my YouTube Chanel in JSON/JavaScript?
Below is my code
var channelID = "MY-ID";
var reqURL = "https://www.youtube.com/feeds/videos.xml?channel_id=";
$.getJSON("https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(reqURL)+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
});
<iframe id="youtube_video" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
I Found It you have to change the number in the []'s.
var channelID = "MY-ID";
var reqURL = "https://www.youtube.com/feeds/videos.xml?channel_id=";
$.getJSON("https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(reqURL)+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
var link = data.items[1].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video2").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
var link = data.items[2].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video3").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<iframe id="youtube_video" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<iframe id="youtube_video2" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<iframe id="youtube_video3" width="600" height="340" frameborder="0" allowfullscreen></iframe>
I need to change zoom rate on different breakpoint for embed google my map. Map is embed in iframe like this
<iframe src="https://www.google.com/maps/d/embed?mid=ID_here&z=15" width="100%"></iframe>
As you can see, zoom is 15, but I need to change it on mobile and tablet devices.
Do you have idea how to do that?
Perhaps something like this:
<!DOCTYPE html>
<html>
<head><title>test</title></head>
<body>
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBu9SPYB9qp2PTe1M1_TyBAQN4c-yL8HYQ
&q=Space+Needle,Seattle+WA&zoom=10" allowfullscreen>
</iframe>
<script>
function setEmbeddedMapZoom() {
var zoomForPhone = 15;
var defaultZoom = 10;
var baseSrc = 'https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Space+Needle,Seattle+WA&zoom=';
if (window.innerWidth < 1600) {
document.getElementsByTagName('iframe')[0].setAttribute('src', baseSrc + zoomForPhone);
} else {
document.getElementsByTagName('iframe')[0].setAttribute('src', baseSrc + defaultZoom);
}
}
window.addEventListener('resize', setEmbeddedMapZoom);
</script>
</body>
</html>
http://jsbin.com/tucanayiye/edit?html,output
Please note that I had to make sure the Embed API was turned on in the project where I created the API key.
I have got my video & its playing fine, but now i need to add a logo on my video tag at right bottom corner(the coordinates(2,2,60,60) icon size is 60*60),
I thought of using canvas, but came up some thing like this..
<html>
<head>
<title>testpage</title>
<script type="text/javascript">
window.addEventListener('load', function () {
var element = document.getElementById('myCanvas');
if (!element || !element.getContext) {
return;
}
var context = element.getContext('2d');
if (!context || !context.drawImage) {
return;
}
var google_img = new Image();
google_img.addEventListener('load', function () {
context.drawImage(this, 2, 2, 60, 60);
},false);
google_img.src = "logo.png";
},false);
</script>
</head>
<body>
<div align="center" style="padding-top:25px;">
<video src="Simplevideo.mp4" width="610" height="380" type="video/mp4" controls="controls"><p>Your browser does not support the video.</p></video>
<canvas id="myCanvas" width="62" height="62">Your browser does not support HTML5 Canvas element.</canvas>
</div>
</body>
</html>
any help to get it..
thanks in advance
shameer ali shaik
You could simply use a div as loxxy said in a comment, but if you really want to use canvas for some reason here is a jsfiddle with your code (fixed) :
http://jsfiddle.net/aS9VG/
The trick is to set the element to an absolute position so it can overlap another element :
style="position:absolute;right:150px;bottom:300px"