OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Play Video as Background Video and not open in new window

  • Thread starter Thread starter Studio Wai
  • Start date Start date
S

Studio Wai

Guest
i have a section with a background video and by default the video is paused. When the user click on "Play Video" button, the video opens in a new window what i not want.

I want to play the video in the same browser live the bmw video in my examples.

Here is the video of my website: streamable.com/6of5h9

Here is the video, i want to copy the effect for my website: streamable.com/xiq97z

How i can do that the video plays as background image?

In my code i use this to play and pause the video:

Code:
const vidBtn = document.querySelectorAll('.kb-video-btn')
    if (vidBtn.length !== 0)
        Array.prototype.forEach.call(vidBtn, function (el) {
            if (el.classList.contains('play')) {
                el.addEventListener('click', function () {
                    let p = el.parentNode.parentNode.parentNode.parentNode
                    let v = p.querySelector('video')
                    if (v.playing) {
                        v.pause() // v.currentTime = 0;
                        return
                    }
                    v.autoplay = true
                    v.play()
                })
            }
        })

<p>i have a section with a background video and by default the video is paused.
When the user click on "Play Video" button, the video opens in a new window what i not want.</p>
<p>I want to play the video in the same browser live the bmw video in my examples.</p>
<p>Here is the video of my website: <code>streamable.com/6of5h9</code></p>
<p>Here is the video, i want to copy the effect for my website: <code>streamable.com/xiq97z</code></p>
<p>How i can do that the video plays as background image?</p>
<p>In my code i use this to play and pause the video:</p>
<pre><code>const vidBtn = document.querySelectorAll('.kb-video-btn')
if (vidBtn.length !== 0)
Array.prototype.forEach.call(vidBtn, function (el) {
if (el.classList.contains('play')) {
el.addEventListener('click', function () {
let p = el.parentNode.parentNode.parentNode.parentNode
let v = p.querySelector('video')
if (v.playing) {
v.pause() // v.currentTime = 0;
return
}
v.autoplay = true
v.play()
})
}
})
</code></pre>
 
Top