I use Squarespace for my portfolio site. They have a "block" that allows me to use embedded Adobe XD code (below) to show my app prototype. The prototype works fine but when the page loads, it automatically shifts half way down the page to the prototype. link to page
<center>
<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen" frameborder="0">
</iframe>
</center>
I would like for my page to remain at the top when fully loaded instead of jumping down mid-page to the prototype. I've tried countless solutions such as using sandbox, lazy loading, and loading on scroll view. I've tried using "data src=""" as well among other options.
Unfortunately none of these solutions worked. The only time it doesn't jump down to the prototype is when it doesn't load at all (which happened with lazy loading, loading on scroll). How can I fix this? I'm able to use HTML, CSS, and JavaScript as well.
My best guess is to delay loading the prototype until it's in view. The only other option would be placing the prototype at the top of the page, which is not what I want (it messes up the flow of the project).
Any help is greatly appreciated!
Option 1: Use the "sandbox" attribute.
This appears to be a known issue within the Adobe Community site, with a solution proposed using the sandbox iframe attribute.
<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen" frameborder="0" sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
Or, possibly even more restrictive (which may cause the iframe not to work):
<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen" frameborder="0" sandbox></iframe>
Option 2: Use the "onload" attribute with "scroll()"
If neither of the above work, you could try using the onload attribute to force the scroll position:
<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen" frameborder="0" onload="scroll(0,0);"></iframe>
Option 3: Load the iframe only when in view.
If neither option 1 or 2 work, you could only load the iframe once it is already in view for the user (once they have scrolled down). For browsers that don't support IntersectionObserver, keep the external link as you have it. For browsers that do, hide the link and load the iframe. Insert the following via a code block above the image block that has your external link:
<iframe id="nautilab" width="0" height="0" frameborder="0" allowFullScreen></iframe>
Then insert the following via sitewide footer code injection
<script>
(function() {
var target,
io,
ioCallback,
ioOptions,
linkBlock;
// Exit if id "nautilab" not found.
target = document.querySelector('#nautilab');
if (!target) {
return;
}
// Check for IntersectionObserver Support: https://github.com/w3c/IntersectionObserver/issues/296#issuecomment-452230176
if (!('IntersectionObserver' in window) ||
!('IntersectionObserverEntry' in window) ||
!('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
target.style.display = "none";
return;
}
// Because IntersectionObserver is supported, hide external link to prototype.
linkBlock = document.querySelector('#block-yui_3_17_2_1_1574114822673_377170');
linkBlock.style.display = "none";
// Loads the iframe when the 'target' is in view.
ioCallback = function(entries, observer) {
entries.forEach(function(entry) {
if (entry.intersectionRatio) {
observer.disconnect();
target.height = "736"
target.width = "414";
target.src = "https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982";
}
});
};
ioOptions = {
root: null,
rootMargin: "0px",
threshold: 1
};
// Observe for 'target' to be in view.
io = new IntersectionObserver(ioCallback, ioOptions);
io.observe(target);
})();
</script>
You'll still have to center the prototype using CSS, which shouldn't be too difficult.
I am trying to embed a vimeo video using iframe in my Qualtrics survey. When this video ends, I want to automatically advance to the next page (i.e., automatically press the "next button"). Before using vimeo, my videos were stored on dropbox and I used the following code for this (the url is not the real one):
<video autoplay="" id="video1" height="580" width="740"><source src="https://dl.dropboxusercontent.com/u/6339921/att/fam.mp4" type="video/mp4"></video>
Qualtrics.SurveyEngine.addOnload(function() {
that = this;
document.getElementById('video1').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) {
e = window.event;
}
that.clickNextButton();
}
});
However, it seems that I have to use iframe with vimeo, but I am unable to make the auto-advance work (the video will play but the page will not advance). Maybe it is because I am assigning the "ID" the wrong way. Here is the code:
<iframe id="player1" src="https://player.vimeo.com/video/20708824?autoplay=1api=1&player_id=player1&title=0&byline=0&portrait=0&background=1&mute=0&loop=0" width="600" height="400" frameborder="0"></iframe>
Qualtrics.SurveyEngine.addOnload(function() {
that = this;
var idPlayer = new Vimeo.Player('player1');
document.getElementByID('player1').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
that.clickNextButton();
}
});
I am looking for a) an option to fix the iframe code, or b) an option to embed a vimeo video using the old code that I had used with dropbox videos.
Thanks so much and I apologize if this all sounds naive, I am not a programmer :-(
You can't add an event listener to an iframe from a different domain. It is called cross-domain scripting and for security reasons isn't allowed by the browser.
You have to use postMessage. There is a JavaScript class already written, but you would have figure out how to integrate it into Qualtrics:
https://github.com/vimeo/player.js
This is probably an odd question, but for fun i recreated the Spotify layout to their app in codepen, now I want to add some functionality, is there a way I can get music to play using JS or jQuery?
My first thought was to embed the video and hide it behind the play button, but that doesn't quite work for me.
Is there a way I can set a var where I set it = to a url, then use an onclick or toggle command to play the url?
The only way I could think about going this would be:
var expirePrettyLow = 'url:www.fake.com'
$('#play').toggle(
function(){
//play youtube link?
);
I hope this makes sense, is there an api I can call to just get the mp3s? I don't want to upload them since it's just linking, not trying to make a product out of this, just to add to portfolio.
For reference here is my codepen link.
Thanks for whatever advice/direction you can give me!
EDIT: To clarify, by 'linked' and not 'loaded'
I would like to accomplish this by linking to a url (ie: href="") as opposed to saving it in my directory and loading it through a filepath (ie: music/tracks/expire-prettylow.mp3)
User a blank audio tag and set the play button's onClick to "var newSrc = newSource.com/song.mp3; playTrack()", and have the playTrack() function load and play the song. Here's an example of a code that changes the source of the audio element then plays the new source.
<script>
function playTrack(){
var music = document.getElementById("myAudio");
music.src = newSrc;
music.load();
music.play();
}
</script>
<audio id="myAudio" src="">
Audio tag not supported
</audio>
Click a song to play it:
<ul>
<li onClick="newSrc = 'http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3'; playTrack()">People are Strange</li>
<li onClick="newSrc = 'http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3'; playTrack()">Oh What a Night</li>
</ul>
Set the src with JavScript, music.load(), then music.play()
I've been using SublimeVideo, and I've done so much with it already for the site I'm working on.
I've got 15-20 videos that I'm successfully using via SublimeVideo on a site in the basic way, by having a link on the page the user clicks on, and when clicked, the video opens in the SublimeVideo lightbox and starts playing.
But now, I'm needing to create "shorter URLs" for these videos that can be sent out in print publications and emails, and where the user is taken to the website to view, not just the video file.
Ideally, I was hoping to just use the id/data-uid with a hashtag in a single-page url and have the chosen video to automatically launch'n'play within the lightbox. That seems to be impossible (?).
I could settle with having a single page with the video tags hidden and have the hashtag unhide it and play it when in the URL. If none of this can work in a slick way, maybe I'll just go old-school and make a page for each video and just embed it in the page..
Anyway, after scouring all the documentation pages, their forums, and searching the web, I've only found a couple of options - neither of which have actually worked. I'll paste them below:
First, here's an example of the HTML I'm using for all the videos:
<p class="">video1 text link on page</p>
<video id="video1" data-uid="video1" title="video1 description" poster="/assets/images/video1.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/video1.mp4" />
</video>
That, by itself, works great! I don't want to change that. When the text link is clicked, the lightbox opens and the video plays perfectly.
So, let's say the page that holds the 15-20 videos with the above code for them is at:
http://example.com/resources/index.php
I thought I could simply make that URL for the first video:
http://example.com/resources/index.php#video1
...or even better...
http://example.com/resources#video1
...and follow suit for all the other video IDs.
And to get that to work, I've tried:
<script type="text/javascript">
sublimevideo.ready(function()
{
if (window.location.hash == '#video1') {
sublime('video1').play();
} else
if (window.location.hash == '#video2') {
sublime('video2').play();
} else
if (window.location.hash == '#video3') {
sublime('video3').play();
}
});
</script>
...that doesn't work. For some reason it works with whatever the first video is on the page, but by "work" I mean, it unhides it and makes it playable, not open in the lightbox and auto play.
So then I found code in the sharing documentation area like this:
<script type="text/javascript">
var hashtag = "#video1";
var hashtag = "#video2";
var hashtag = "#video3";
if (document.location.hash == hashtag) {
showTheVideo(hashtag);
}
function showTheVideo(hashtag) {
}
</script>
...but that doesn't work either.
Could somebody that does know JavaScript please spell it out for me?
I'll put the code that fixed the issue for me here in hopes it helps somebody else someday that may search and find it.
By putting the below code in the head of the page, under the...
<script type="text/javascript" src="//cdn.sublimevideo.net/js/UniqueIDprovidedInYourAccountGoesHere.js"></script>
...library (which is the random characters/numbers .js that SublimeVideo gives you in your account area), I was able to finally get the above detailed problem to work (YAY!!!).
So, using the same example as above, this URL now works as I needed (by not only taking you to the resources page, but also by launching the particular video in its lightbox).
http://example.com/resources.php#video=interview2
...and by putting:
RewriteRule ^resources$ resources.php [L]
...in the .htaccess file in the same dir, I was able to make it even easier for the user:
http://example.com/resources#video=interview2
As I understand it, the below JavaScript addition finds the hash, then looks for the "video=", then takes whatever is after that, and if it finds a matching "id" in an "a" tag, then it tells it to do it's SublimeVideo thing by launching that video in the lightbox. Brilliant!
<script type="text/javascript">
$(document).ready(function () {
var lochash = location.hash.substr(1);
var mylocation = lochash.substr(lochash.indexOf('video='))
.split('&')[0]
.split('=')[1];
sublime.ready(function () {
var lightbox = sublime.lightbox(mylocation);
lightbox.open();
});
});
</script>
Here's the HTML part (for reference):
<p class="">video2 text link on page that i left as reference for the user in case they close the video that was launched from the publication</p>
<video id="video2" data-uid="video2" title="video2 description" poster="/assets/images/interview2.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/interview2.mp4" />
</video>
Also note: I found out through trial and error that the name of the video in the URL, after the "#video=" must be the same as the "ID" in the "A" tag, not the "video" tag! So, you'll notice that the "id=" is (and needs to be) different between the two. The "id=" in the "video" tag is instead the same as the "href=".
I have a hidden div containing a YouTube video in an <iframe>. When the user clicks on a link, this div becomes visible, the user should then be able to play the video.
When the user closes the panel, the video should stop playback. How can I achieve this?
Code:
<!-- link to open popupVid -->
<p>Click here to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>
<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>
<br /><br />
<a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
close
</a>
</div><!--end of popupVid -->
The easiest way to implement this behaviour is by calling the pauseVideo and playVideo methods, when necessary. Inspired by the result of my previous answer, I have written a pluginless function to achieve the desired behaviour.
The only adjustments:
I have added a function, toggleVideo
I have added ?enablejsapi=1 to YouTube's URL, to enable the feature
Demo: http://jsfiddle.net/ZcMkt/
Code:
<script>
function toggleVideo(state) {
// if state == 'hide', hide. Else: show video
var div = document.getElementById("popupVid");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
div.style.display = state == 'hide' ? 'none' : '';
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>
<p>Click here to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>
<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br /><br />
close
Here's a jQuery take on RobW's answer for use hiding /pausing an iframe in a modal window:
function toggleVideo(state) {
if(state == 'hide'){
$('#video-div').modal('hide');
document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
else {
$('#video-div').modal('show');
document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
}
}
The html elements referred to are the modal div itself (#video-div) calling the show / hide methods, and the iframe (#video-iframe) which has the video url as is src="" and has the suffix enablejsapi=1? which enables programmatic control of the player (ex. .
For more on the html see RobW's answer.
Here is a simple jQuery snippet to pause all videos on the page based off of RobW's and DrewT's answers:
jQuery("iframe").each(function() {
jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
Hey an easy way is to simply set the src of the video to nothing, so that the video will desapear while it's hidden an then set the src back to the video you want when you click on the link that opens the video.. to do that simply set an id to the youtube iframe and call the src function using that id like this:
<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}
function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>
<body>
<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>
<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>
</boby>
Since you need to set ?enablejsapi=true in the src of the iframe before you can use the playVideo / pauseVideo commands mentioned in other answers, it might be useful to add this programmatically via Javascript (especially if, eg. you want this behaviour to apply to videos embedded by other users who have just cut and paste a YouTube embed code). In that case, something like this might be useful:
function initVideos() {
// Find all video iframes on the page:
var iframes = $(".video").find("iframe");
// For each of them:
for (var i = 0; i < iframes.length; i++) {
// If "enablejsapi" is not set on the iframe's src, set it:
if (iframes[i].src.indexOf("enablejsapi") === -1) {
// ...check whether there is already a query string or not:
// (ie. whether to prefix "enablejsapi" with a "?" or an "&")
var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&";
iframes[i].src += prefix + "enablejsapi=true";
}
}
}
...if you call this on document.ready then all iframes in a div with a class of "video" will have enablejsapi=true added to their source, which allows the playVideo / pauseVideo commands to work on them.
(nb. this example uses jQuery for that one line that sets var iframes, but the general approach should work just as well with pure Javascript if you're not using jQuery).
I wanted to share a solution I came up with using jQuery that works if you have multiple YouTube videos embedded on a single page. In my case, I have defined a modal popup for each video as follows:
<div id="videoModalXX">
...
<button onclick="stopVideo(videoID);" type="button" class="close"></button>
...
<iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>
In this case, videoModalXX represents a unique id for the video. Then, the following function stops the video:
function stopVideo(id)
{
$("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
I like this approach because it keeps the video paused where you left off in case you want to go back and continue watching later. It works well for me because it's looking for the iframe inside of the video modal with a specific id. No special YouTube element ID is required. Hopefully, someone will find this useful as well.
You can stop the video by calling the stopVideo() method on the YouTube player instance before hiding the div e.g.
player.stopVideo()
For more details see here: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls
RobW's way worked great for me. For people using jQuery here's a simplified version that I ended up using:
var iframe = $(video_player_div).find('iframe');
var src = $(iframe).attr('src');
$(iframe).attr('src', '').attr('src', src);
In this example "video_player" is a parent div containing the iframe.
just remove src of iframe
$('button.close').click(function(){
$('iframe').attr('src','');;
});
Rob W answer helped me figure out how to pause a video over iframe when a slider is hidden. Yet, I needed some modifications before I could get it to work. Here is snippet of my html:
<div class="flexslider" style="height: 330px;">
<ul class="slides">
<li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
<li class="post-65><img src="http://localhost/..../banner_image_2.jpg "></li>
<li class="post-67 ">
<div class="fluid-width-video-wrapper ">
<iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
</div>
</li>
</ul>
</div>
Observe that this works on localhosts and also as Rob W mentioned "enablejsapi=1" was added to the end of the video URL.
Following is my JS file:
jQuery(document).ready(function($){
jQuery(".flexslider").click(function (e) {
setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated
});
});
function checkiframe(){
var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
console.log(iframe_flag);
var tooglePlay=0;
if (iframe_flag) { //If Visible then AutoPlaying the Video
tooglePlay=1;
setTimeout(toogleVideo, 1000); //Also using timeout here
}
if (!iframe_flag) {
tooglePlay =0;
setTimeout(toogleVideo('hide'), 1000);
}
}
function toogleVideo(state) {
var div = document.getElementsByTagName("iframe")[0].contentWindow;
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
};
Also, as a simpler example, check this out on JSFiddle
This approach requires jQuery. First, select your iframe:
var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.
Now you select button play/pause of this iframe and click it
$('button.ytp-play-button.ytp-button', yourIframe).click();
I hope it will help you.
RobW's answers here and elsewhere were very helpful, but I found my needs to be much simpler. I've answered this elsewhere, but perhaps it will be useful here also.
I have a method where I form an HTML string to be loaded in a UIWebView:
NSString *urlString = [NSString stringWithFormat:#"https://www.youtube.com/embed/%#",videoID];
preparedHTML = [NSString stringWithFormat:#"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%#?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];
You can ignore the styling stuff in the preparedHTML string. The important aspects are:
Using the API to create the "YT.player" object. At one point, I only had the video in the iFrame tag and that prevented me from referencing the "player" object later with JS.
I've seen a few examples on the web where the first script tag (the one with the iframe_api src tag) is omitted, but I definitely needed that to get this working.
Creating the "player" variable at the beginning of the API script. I have also seen some examples that have omitted that line.
Adding an id tag to the iFrame to be referenced in the API script. I almost forgot that part.
Adding "enablejsapi=1" to the end of the iFrame src tag. That hung me up for a while, as I initially had it as an attribute of the iFrame tag, which does not work/did not work for me.
When I need to pause the video, I just run this:
[webView stringByEvaluatingJavaScriptFromString:#"player.pauseVideo();"];
Hope that helps!
This is working fine to me with YT player
createPlayer(): void {
return new window['YT'].Player(this.youtube.playerId, {
height: this.youtube.playerHeight,
width: this.youtube.playerWidth,
playerVars: {
rel: 0,
showinfo: 0
}
});
}
this.youtube.player.pauseVideo();
A more concise, elegant, and secure answer: add “?enablejsapi=1” to the end of the video URL, then construct and stringify an ordinary object representing the pause command:
const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
"event": {
"value": "command",
"enumerable": true
},
"func": {
"value": "pauseVideo",
"enumerable": true
}
}));
Use the Window.postMessage method to send the resulting JSON string to the embedded video document:
// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);
Make sure you specify the video URL for the Window.postMessage method’s targetOrigin argument to ensure that your messages won’t be sent to any unintended recipient.