Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Button click to fullscreen

  • declabo
  • declabo's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 5 months ago #231280 by declabo
Button click to fullscreen was created by declabo
Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Community Edition
Version 5.3.6+220321
Own server or LimeSurvey hosting: own server
Survey theme/template: fruity
==================
Hello,
I am trying to add a button that allows to display a youtube video fullscreen (code below). When the button is clicked, the code below allows to set the video fullscreen for 1 second but then the page comes back to the beginning of the survey. Would you know how to keep it fullscreen until the end of the video ?
Thank you in advance for your help !
Code:
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" class="responsive-iframe" frameborder="0" height="315" id="myvideo" src="LINK HERE" title="YouTube video player" width="600px"></iframe>
<p> </p>
<button onclick="openFullscreen_test();">Click here for Fullscreen</button><script type="text/javascript" charset="utf-8">var elem = document.getElementById("myvideo");
function openFullscreen_test() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 5 months ago #231288 by tpartner
Replied by tpartner on topic Button click to fullscreen
You are placing the HTML inside an existing form so you need to assign a type="button" attribute to the button or it will submit the form (reloading the page).

Change this:

Code:
<button onclick="openFullscreen_test();">Click here for Fullscreen</button>

To this:

Code:
<button type="button" onclick="openFullscreen_test();">Click here for Fullscreen</button>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • declabo
  • declabo's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 5 months ago #231293 by declabo
Replied by declabo on topic Button click to fullscreen
Hi,
thank you for your quick response. I added the type="button" as you suggested but the button is not responsive anymore.
I am not sure why.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 5 months ago #231296 by tpartner
Replied by tpartner on topic Button click to fullscreen
Show us your code.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • declabo
  • declabo's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 5 months ago - 2 years 5 months ago #231297 by declabo
Replied by declabo on topic Button click to fullscreen
Thank you
[img

Here is my code :
Code:
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" class="responsive-iframe" frameborder="0" height="315" id="myvideo" src="LINKHERE" title="YouTube video player" width="600px"></iframe>
<p> </p>
<button onclick="openFullscreen_test();" type="button">Click for fullscreen</button><script type="text/javascript" charset="utf-8">var elem = document.getElementById("myvideo");
function openFullscreen_test() {
elem.play();
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>

 
Last edit: 2 years 5 months ago by declabo.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 5 months ago #231322 by tpartner
Replied by tpartner on topic Button click to fullscreen
Always check the console (F12) for JavaScript errors. You have added a method elem.play(); which triggers a fatal error.

This works:

Code:
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" class="responsive-iframe" frameborder="0" height="315" id="myvideo" src="LINKHERE" title="YouTube video player" width="600px"></iframe>
<p> </p>
<button onclick="openFullscreen_test();" type="button">Click for fullscreen</button>
<script type="text/javascript" charset="utf-8">
  var elem = document.getElementById("myvideo");
  function openFullscreen_test() {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
      elem.msRequestFullscreen();
    }
  }
</script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • declabo
  • declabo's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 5 months ago #231324 by declabo
Replied by declabo on topic Button click to fullscreen
Oh yes ! Thank you so much for your help ! That's perfectly working now !

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source