Disable 'Autoplay' on videos recorded into Milestones

[Danibelle]

See Josh Fairhead's RewardDAO Feb Milestone as example (and to check out his mad skillz in the juggling department).

It's rather disconcerting to open the Milestone and have the video begin playing automatically.. can this setting be disabled so I can click play when I'm ready to hear it?

[Danibelle]

Another example here

I think we did this already on the Wall of Fame - now that we are loading the videos directly to the Milestone the same change is needed in the DApp.

[GriffGreen]

30 DAI Bounty?

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 30.0 DAI (30.0 USD @ $1.0/DAI) attached to it as part of the Giveth fund.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $53,618.89 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 1 month ago.
Please review their action plans below:

1) wenheli has applied to start work (Funders only: approve worker | reject worker).

Interested in this work! I can start it right now if nobody is working on it yet!
2) kilimanjaro2 has applied to start work (Funders only: approve worker | reject worker).

Find the reason for it not autostopping. Rectify the issue.
3) gil-air-may has applied to start work (Funders only: approve worker | reject worker).

From what I've seen so far, you cannot delete the autoplay attribute directly. The videos are being loaded from a different web page (ipfs) using an iframe element. There's no actual

A potential alternative is to use the removeAttribute() from html DOM. I believe it should be possible to access the

Thank you for creating a bounty for such an accessible issue. I have been wanting to get started with gitcoin but haven’t found a good place to start. Until now that is!

As for the plan, I believe removing the autoPlay attribute from the video element would do the trick. This would prevent the video from automatically playing (go figure).

I love what you all are doing with Giveth and will be looking to contribute regardless of wether or not I am assigned this bounty.

Thanks for your time,
Fritz
5) julesgoullee has applied to start work (Funders only: approve worker | reject worker).

Hey, I can do it really quiclky follow web standard and cross device
6) loveprit-singh has applied to start work (Funders only: approve worker | reject worker).

hi '
i am interested in your porject please allow me to work on your project .i have 2+ yr experience in web development and Dapp development.
7) nadirlaskar has been approved to start work.

It seems the video is loaded from IPFS and it is loaded inside iframe we cannot access the video
inside iframe due to cross origin policy.

I would like to work on the issue and see if there is any possible solution.

Thanks.

Learn more on the Gitcoin Issue Details page.

[aahutsal]

@GriffGreen guess this line should be removed. Can do it real quick.

[aahutsal]

@GriffGreen [View Signed NDA] functionality is broken on Gitcoin ;(

[nadirlaskar]

@ I think, I found the problem the milestone's description is stored in db as iframe element
<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://ipfs.giveth.io/ipfs/xxxxxxxxxxx"></iframe><p><br /></p>"

( back-end solution )

Which can be solved by converting the back-end code to store and return as video tag
<video controls="" autoplay="false" name="media"><source src="https://ipfs.giveth.io/ipfs/xxxxxxxxxxx" type="video/webm"></video>

or ( front-end solution )

we can transform that description to video element here like this by extracting the source from the iframe source and assign it to the video source

renderDescription() {

  // Convert the iframe to video element
   this.state.milestone.description = `<video controls="" autoplay="false" name="media">
                <source src=${$(this.state.milestone.description)[0].src} type="video/webm">
   </video>`

  //Remaining code
    return ReactHtmlParser(this.state.milestone.description, {
      transform(node, index) {
        if (node.attribs && node.attribs.class === 'ql-video') {
          return (
            <div className="video-wrapper" key={index}>
              {convertNodeToElement(node, index)}
            </div>
          );
        }
        return undefined;
      },
    });
  }

I can raise a pull request with the required fix from the front-end side solution.

Currently, waiting for the approval in gitCoin.

[GriffGreen]

@nadirlaskar Ok you are approved!

[gitcoinbot]

@nadirlaskar Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• reminder (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[nadirlaskar]

@nadirlaskar Ok you are approved!

@GriffGreen I have submitted a PR with changes

[nadirlaskar]

@nadirlaskar Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

> * [x]  reminder (3 days)
> Funders only: Snooze warnings for [1 day](https://gitcoin.co/issue/Giveth/giveth-dapp/740/2765?snooze=1) | [3 days](https://gitcoin.co/issue/Giveth/giveth-dapp/740/2765?snooze=3) | [5 days](https://gitcoin.co/issue/Giveth/giveth-dapp/740/2765?snooze=5) | [10 days](https://gitcoin.co/issue/Giveth/giveth-dapp/740/2765?snooze=10) | [100 days](https://gitcoin.co/issue/Giveth/giveth-dapp/740/2765?snooze=100)

• escalation to mods (6 days)

I have submitted a PR with changes, I will submit work in Gitcoin as soon as I have some ETH for gas price.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work for 30.0 DAI (30.0 USD @ $1.0/DAI) has been submitted by:

1. @nadirlaskar

@GriffGreen please take a look at the submitted work:

• PR by @nadirlaskar

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $97,385.36 more funded OSS Work available on the Gitcoin Issue Explorer

[GriffGreen]

still testing it... will be done this week

[DSBUGAY2]

D