Embed YouTube video while functions are disabled yet also played on mobile | XM Community
Solved

Embed YouTube video while functions are disabled yet also played on mobile

B

I do not want participants to click in YouTube functions or forward the video.
I found some code to make a div frame so to disable participants to click on the video as a whole
However, autoplay does not work on mobile. Is there a way to have participants click to play the video while at the same time disable them to click on other parts?
This is my code:



And I have this in CCS:
.vid { pointer-events:none}
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}




icon

Best answer by rondev 18 May 2020, 10:32

View original

10 replies

B

Is there a way to make a play button in the div so that those that are on mobile ca play the YouTube video?

rondev
Rank
Userlevel 7
Badge +22

Create a button using below code

Paste the below code in the JS onReady function
window.setTimeout(function() {
 onYouTubeIframeAPIReady()
}, 500);
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
function onYouTubeIframeAPIReady() {
  // first video
  player1 = new YT.Player('vid', {
    events: {
      'onReady': onPlayerReady
   
    }
  });

  
}

jQuery("#btn").on('click',function(){
player1.playVideo();
});

function onPlayerReady(event) {
    event.target.playVideo();
   }

Ron Dev (DM for any request. Freelancer, surveysolution.in)
B

Tank you very much! I've added the JS code and my code for the video now looks like below. The play button is working on mobile. However, they can then again control everything in the player that pops up. Is there a way to disable those functions as well (fast forward, pause)?



rondev
Rank
Userlevel 7
Badge +22

I hope you have put the same css in the survey that is mentioned in the question, as I was not able to fast forward or use any function on youtube video.
Use the below updated code in JS (I guess using this, their will be no need of button in mobile but still please check)

window.setTimeout(function() {
 onYouTubeIframeAPIReady()
}, 500);
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
function onYouTubeIframeAPIReady() {
  // first video
  player1 = new YT.Player('vid', {
    events: {
      'onReady': onPlayerReady
   
    },
playerVars: { 
    'controls': 0,
    'showinfo': 0,
'autoplay':1,
'rel':0,
'disablekb':1,
'modestbranding':1
   }
  });

  
}

jQuery("#btn").on('click',function(){
player1.playVideo();
});

function onPlayerReady(event) {
    event.target.playVideo();
   }

Ron Dev (DM for any request. Freelancer, surveysolution.in)
B

Yes, I left CSS the same.
On my laptop it works. And indeed I'm not able to use any functions of the YouTube player.
I keep the play button under the video so that respondents can play it again should they have been distracted, thank you!
However, on my mobile phone I can still control the player that plays the video (no YouTube functions, but pause and fast forward). Might just ask them to not complete the survey on a mobile device.

B


I'm okay with how it is now (everything disabled when on laptop/dekstop). Thank you very much for adding the play button! I'll ask participants to do the survey on laptop/dekstop, but now they can press play should they still be on mobile. 
Thank you very much for your help rondev :)


K

I'm hoping someone can help me—whether someone on this thread — rondev rondev and/or Btina —or someone else can help me. I'm trying to do what's described above as it sounds like you it works on a laptop/desktop. That would be enough for me (I'm not even worrying about the mobile issues right now), but I think I am putting the code in the wrong place or doing something else wrong. I cannot get the video itself to play at all. I've tried using the code in this thread but I don't have a strong understanding of JS or CSS so am not always even sure where to put things!
I would be so grateful for your help; I've been trying to figure this out for days....
Thank you in advance!

B

I know exactly how you feel! It was all new for me as well. I'm just going to explain what I did.
1) make a new question in Qualtrics as "Text/Graphic". Click to write the text and go to "Rich content editor" and paste the code for your video there.
2) click on the wheel you see under the question number and go to "add javascript", then in stead of the orange in the "On ready" part you paste the following
window.setTimeout(function() {
 onYouTubeIframeAPIReady()
}, 500);
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
function onYouTubeIframeAPIReady() {
  // first video
  player1 = new YT.Player('vid', {
  events: {
  'onReady': onPlayerReady
 
  },
playerVars: {
  'controls': 0,
  'showinfo': 0,
'autoplay':1,
'enablejsapi':1,
'rel':0,
'disablekb':1,
'modestbranding':1
  }
  });

 
}

jQuery("#btn").on('click',function(){
player1.playVideo();
});

function onPlayerReady(event) {
  event.target.playVideo();
  }


 3) To change your survey main setting you go to "Look & Feel" -> "Style" and in the custom CSS you paste the following
#vid { pointer-events:none}

.video-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
.video-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}



Schermafbeelding 2020-10-22 om 00.48.08.pngSchermafbeelding 2020-10-22 om 00.49.59.pngSchermafbeelding 2020-10-22 om 00.59.07.png

K

Thank you!!!
Do you know if there is a way to get the title of the video, etc. not to display? And did you ever get the play button working? I would prefer not to have the video autoplay, but to have the respondent start it with the play button.

S

Hi Btina and kyu!
I’m having the same issue as kyu was: I tried to put in the code but it seems like the autoplay function doesn’t work; the video just keeps buffering forever and never actually plays. I’m using google drive videos instead of YouTube videos - could this be a factor? I’ve been trying to figure this out for days and like you kyu, I am super unfamiliar with coding so it’s been pretty confusing and frustrating. Btina I tried doing what you suggested but I think it may not work because my videos aren’t YouTube videos.
My original code to embed the video without including any autoplay or invisible divs looks like this:


Leave a Reply


Terms & Conditions