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.
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>
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);
On a website I am building I have a vimeo video embedded. The client needs to keep the sound on the video obviously for people that find it on vimeo. However for her website the sound is just plain annoying. So I need to find a way to mute the audio within the code for the embed. I have googled it but can't seem to find anything legible. As you can see from my code below, I have used the autoplay command within the link I was hoping I could do a similar thing to mute the sound.
<iframe src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
Thanks
In case it helps anyone, Vimeo have added a 'background' parameter for embedding videos, that autoplays videos silently. In some cases that will be useful where people want to mute videos - this is their example:
<iframe src="https://player.vimeo.com/video/76979871?background=1"
width="500" height="281" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
For non-paying members
You just need to add the muted parameter. E.g.:
<iframe src="https://vimeo.com/48400332?autoplay=1&loop=1&muted=1" ></iframe>
For paid members
According to Vimeo, the background parameter is only supported for videos hosted by paid members.
Source: https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos
you will be using setVolume api in your vimeo.. player.api('setVolume', 0);
it will be like this...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?title=0&byline=0&portrait=0&color=d01e2f&autoplay=1&player_id=vimeo_player" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
I tried the examples in the answers with no luck. After looking into the documentation I noticed there is missing the parameter &player_id=IFRAME_ID. Maybe something changed in the Vimeo API, anyway the following example works for me:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="//player.vimeo.com/video/4415083?api=1&player_id=vimeo_player&autoplay=1&loop=1&color=ffffff" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script>
$(function() {
var vimeo_iframe = $('#vimeo_player')[0];
var player = $f(vimeo_iframe);
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
});
</script>
Seems like Vimeo is providing an updated library, and the API syntax is a bit different from the old one (Froogaloop). Here's how to mute an embedded video with JS:
<!--Add the id attr to the iframe tag to use as a selector-->
<iframe id="embeddedVideo" src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<!--Include the Vimeo API Library-->
<script src="https://player.vimeo.com/api/player.js"></script>
<!--Select and manipulate your video-->
<script type="text/javascript">
//Select the #embeddedVideo element
var video = document.getElementById('embeddedVideo');
//Create a new Vimeo.Player object
var player = new Vimeo.Player(video);
//When the player is ready, set the volume to 0
player.ready().then(function() {
player.setVolume(0);
});
</script>
Hope this helps out anyone who's using the new library. Documentation is at vimeo/player.js
Since most of the answers here are referring to Vimeo's old api. Here is the simplest way with the new api. You can include vimeo player.js from their CDN or you can download it or you can include it from npm.
<script src="https://player.vimeo.com/api/player.js"></script>
or
npm install #vimeo/player
then you can do the following.
<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.setVolume(0);
</script>
that's it. And if you are using angular 2+,
import * as Vimeo from '#vimeo/player';
const iframe = e.target;
const player = new Vimeo(iframe);
player.setVolume(0);
here e.target is $event which would be passed from the template. Probably it could be iframe (load) event. Or may be you can use jquery to select iframe.
#Gadss answer works great but I found that you need update the iframe src to include the activation of the Vimeo api. Just include api=1 after the vimeo id.
I've also found that this sometimes doens't work on Safari for some reason.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?api=1&title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
**Here is my solution:
http://jsfiddle.net/jakeoblivion/phytdt9L/5/
(You will need your own play/pause mute/unmute icons)
//load video muted
var video = $("#myvideo");
video.vimeo("play");
video.vimeo("setVolume", 0);
//toggle play/pause
$('#play-pause').click(function() {
$(this).toggleClass('play');
if ($(this).hasClass('play')) {
//pause video
video.vimeo("pause");
$(this).css('background', 'pink');
} else {
//unpause video
video.vimeo("play");
$(this).css('background', 'blue');
}
});
//toggle mute/unmute
$('#mute-unmute').click(function() {
$(this).toggleClass('mute');
if ($(this).hasClass('mute')) {
//unmute video
video.vimeo("setVolume", 1);
$(this).css('background', 'green');
} else {
//mute video
video.vimeo("setVolume", 0);
$(this).css('background', 'red');
}
});
Spent ages trying and nothing seemed to work to.
I just wanted to have a Vimeo autoplay muted (volume 0) with simple Play/Pause Mute/Unmute controls, instead of their default ones. (feel free to use icons instead of the temporary colours I put).
(if you want to add the default controls back but keep muted, remove "?background=1". By default background=1 will set video.vimeo("setVolume", 0) and hide controls, so I also added the mute on load without the background=1 set).
Also note:
"You’ll need to be running on a web server instead of opening the file directly in your browser. JS security restrictions will prevent the API from working when run locally."
I've found a way to do it. You start the video muted so it autoplays, then on the first timeupdate you set the volume to 1.
var options = {
id: 'video_id_here',
width: 640,
loop: false,
muted: true,
autoplay: true
};
var player = new Vimeo.Player('vimeo', options);
player.setVolume(0);
player.on('timeupdate', set_autoplay_volume );
function set_autoplay_volume(){
player.setVolume(1);
player.off('timeupdate', set_autoplay_volume );
}
You try insert ?muted=1 after link in attribute src
For example
<iframe id="vimeo_player" src="https://player.vimeo.com/video/257992348?muted=1">
This is the only way it worked for me: http://jsfiddle.net/87dsjL8q/108/
var iframe = document.getElementsByTagName('iframe')[0];
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 20);
});
<iframe src="http://player.vimeo.com/video/4415083?muted=1; title=0;byline=0;portrait=0;color=d01e2f;autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
you can just give "muted=1" so the video will be muted...
chrome allow the videos autoplay that are muted
I include the YouTube player as follows in my php file but the player does not show the fullscreen button. Switching to the flash player works (whether through changing the url from /embed to /v or by disabling &html5=1). What am I doing wrong?
An example is available here: http://jonnyrimkus.square7.ch/stuff/youtube_html5_fullscreen.php
<script>
var tag = document.createElement(\'script\');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName(\'script\')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player(\'player\', {
playerVars: {
\'allowfullscreen\': \'true\',
\'allowscriptaccess\': \'always\'
},
events: {
\'onReady\': onYouTubePlayerReady,
\'onStateChange\': playerStateChange,
\'onError\': playerStateError
}
});
}
</script>
<iframe id="player" width="425" height="356" border="0" frameborder="0" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1&playerapiid=lastfmplayer&autoplay=1&html5=1&fs=1&origin=http://jonnyrimkus.square7.ch"></iframe>
The fullscreen button will also not be visible if the Youtube player is inside another iframe that does not have allowfullscreen attribute.
Unlike what Google's documentation says(as of 11/2014), the fs attribute in querystring does not seem to influence the visibility of fullscreen. The visibility seems to be influenced by allowfullscreen attribute in iframe which youtube player puts by default during instantiation. That said, if your embed the player inside another iframe you should also mark that iframe for allowfullscreen ( or all its variants webkitallowfullscreen mozallowfullscreen)
<iframe src='' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen>
<!-- YT player-->
</iframe>
The way you are using the iframe api now does nothing, the api is made to bind on an empty element, like <div id="player"></div>, the id is the first argument in the new YT.Player function.
In order to load a youtube video with the iframe api you need this in the body:
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: 480,
width: 640,
videoId: "36XdO9Iv9ew",
});
}
</script>
There is no need to explicitely specify you want to enable fullscreen when using the iframe api.
You can also just use the iframe without the api, you'll need to specify you want fullscreen when you use it.
<iframe width="640" height="480" frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1"></iframe>
Just using the iframe tag is a bit faster, but if you want to use the extra features of the iframe api you have no choice.
A page with examples (also check the source): http://qnet.co/yt
You can also implement the fullscreen feature yourself (not needed for Youtube, but still cool):
var goFullscreen = function(id) {
var el = document.getElementById(id);
if (el.requestFullScreen) {
el.requestFullScreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen();
}
}
var leaveFullscreen = function() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
and to make the Youtube player go fullscreen with: goFullscreen('player'), and leave fullscreen with: leaveFullscreen()
The different versions of requestFullscreen and cancelFullscreen are for different browsers, because the standard is not yet completely finished
More info on Javascript Fullscreen: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ (relative old document, but still valid)
off-topic: It is useless to echo such a string with php, you can just paste it in the body the file outside of the php tags.
This is still an issue in July 2014, and you just wonder if Google will ever fix this. Actually you can force the Flash player in another way at the client end by using a UA Spoofer, and for Google Chrome browser for instance, Chrome Web Store - djflhoibgkdhkhhcedjiklpkjnoahfmg and then spoof a browser that doesn't understand HTML5.
Actually HTML5 video is still a disaster, and the grainey spikey-jaggy edges to the video and the herringbone patterning though faint is still distracting. Whereas Flash is Smooth, Flawless, Reliable, and Sharp edges with zero patterning artifacts.
HTML5 - still big thumbs down, I wouldn't inflict it on users.
Oh yes and still Fullscreen not appear in embeds like this
Rick Astley - Never Gonna Give You Up # viewpure embed
http://viewpure.com/dQw4w9WgXcQ
You can use the above example to fiddle and diddle with different browser plugins.