Use piped text in embed youtube link? | XM Community
Question

Use piped text in embed youtube link?

  • 23 May 2023
  • 6 replies
  • 401 views

Badge +2

I’d like to have people listen to their favorite songs (via embedded YouTube video code) in my survey. 

 

I tried having people copy and paste a YouTube link in a text box. Then I tried trimming the first several characters of the piped text such that the unique video identifier is only captured. I’d like to insert this trimmed piped text into the embed video HTML code into a separate block and have the videos autoplay. Ideally, I’d only want the audio play too. 

 

Does anyone know how I can insert piped text into embed code so that people can have individualized YouTube audio in their survey? 

 

Thanks! 


6 replies

Userlevel 7
Badge +33

If you are using js. Then you can create simply create variable under your code.

 

Var variableName='${q://QIDX/enteredText';

 

You can refer below link to get the piping text.

https://www.qualtrics.com/support/survey-platform/survey-module/editing-questions/piped-text/piped-text-overview/

Badge +2

@ArunDubey Thanks for the reply! 

 

Unfortunately, the code for embeding YouTube videos and the YouTube video URLs themselves are different. 

 

For example, someone could copy and paste the following link to Fleetwood Mac’s song: “ https://www.youtube.com/watch?v=WM7-PYtXtJM 
 

But to EMBED it, the code looks like this: <iframe width="560" height="315" src="https://www.youtube.com/embed/WM7-PYtXtJM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

 

You’ll notice some differences (e.g., “embed” in between “.com/” and “?v=”

 

This is why I can’t just insert the same piped text. 

Userlevel 7
Badge +33

You can split the link into array using split('/') function then can try to change the value in between and recreate the link again using /.

Userlevel 7
Badge +33

Also you can simply replace the link parameter. Please refer this stackoverflow link and check if it can help you.

 

 

https://stackoverflow.com/questions/7171099/how-to-replace-url-parameter-with-javascript-jquery

Userlevel 5
Badge +19

Hi @boothieresearcher ,

I have created code which works with different lengths and type YouTube links and stores 
ID value in an embedded data which can be piped anywhere :

 

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
let textInput = document.getElementById("QR~QID96");
let nextButton = document.getElementById("NextButton");

textInput.addEventListener("input", function() {
let text = textInput.value;
let regex = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.?be)\/(?:watch\?v=|embed\/|v\/)?([\w-]+)/;
let isValidYouTubeLink = regex.test(text);

if (isValidYouTubeLink) {
console.log(text);
let match = text.match(regex);
let youtubeID = match && match[1];

console.log(youtubeID);
Qualtrics.SurveyEngine.setEmbeddedData('youtubeID', youtubeID);
nextButton.disabled = false;
} else {
nextButton.disabled = true;
}
});



});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

It also disables the Next button if a valid YouTube link is not pasted.

Hope this resolves your query😊!!

 

Userlevel 5
Badge +24

@boothieresearcher , this is such a cool idea! Way to put the “experience” of your survey-taker to the forefront!

Leave a Reply