add custom play and pause button to vine iframe video - javascript

I have following code to play vine video in my web page.
<iframe src="https://vine.co/v/OpBWALdg3na/embed/simple" width="600" height="600" frameborder="0"></iframe>
But it is play video by default.
Can any one help me to know how can I load video in pause state and after that when I click on my custom button It play that video.
Thanks

Related

Disable fullscreen in ipad vimeo

Is it possible to disable the video playing on fullscreen?
When I press play on the player on the iOS, it is playing the video in fullscreen mode, whereas in android it is playing in the normal mode.
Sharing the code I'm using
<div>
<iframe
src="https://player.vimeo.com/video/120061340?playsline=true"
frameborder="0"
allowfullscreen="false"
allow="autoplay; encrypted-media"
webkit-playsinline="true"
playsline="true"
playsinline="true"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
controlsList="nofullscreen"
title="Sample Video">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js">
</script>
Please let me know if I'm missing something here
You're loading an iframe and trying to put video element attributes on it. Instead of loading the iframe, you'd need to call the video file directly in your own video element. Alternately, you can add a mutation observer that waits for the Vimeo video element to be inserted into the page and which then adds the webkit-playsinline attribute to it.

Stop auto-play video

I am playing a video with in iframe. which is in auto play mode. I want to make it play on click.
Can I get any help in this?
<iframe width="896" height="424" src="http://link.brightcove.com/services/player/bcpid1956333307001?bckey=AQ~~,AAABxzD3Y9k~,w_VmDmf4kc-gzMlyacBFjrfIduWxlrSQ&bctid=4235240679001" id="video"></iframe>
try:
<iframe src="http://link.brightcove.com/services/player/bcpid1956333307001?bckey=AQ~~,AAABxzD3Y9k~,w_VmDmf4kc-gzMlyacBFjrfIduWxlrSQ&bctid=4235240679001&autoStart=false&width=896&height=424" id="video"></iframe>
referenced from here

How to Capture youtube video as image which is been played in iFrame?

I am using Youtube API and playing a video from youtube by sending video ID.
and video is been played well.
Code:
<iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
Now i have a button and i want the javascript to capture the frame which is been played at that particular time.
<input type="button" id="capture" value="Capture" onclick="Captureimage();"/>
like we have this screen capture in VLC media player
I want to have the same functionality here.
Since its an embedded media(Video inside iFrame), struggling bit.
tried with html2canvas. No lucks.
Can anyone plz help.
Regards,
Arun

Youtube iframe API - Android fullscreen

I'm using the YouTube iframe api to embed a video.
When playing the video on an iPhone, the video automatically switches to full screen mode. I was wondering if it's possible to force the same behavior on an Android? (currently the video is played inline, which doesn't look so good).
There is no way to automatically play the video fullscreen. The closest you could get is to put the player in a fullscreen div and autoplay it using the url params:
<iframe width="100%" height="100%" src="//www.youtube.com/embed/fSy6uh-GjCc?controls=0&autoplay=1&showinfo=0" frameborder="0" allowfullscreen></iframe>

Youtube custom play button

it is possible to create a button to play and pause the youtube video when using the youtube script, i mean this
<iframe title="YouTube video player" width="853" height="510" src="http://www.youtube.com/embed/LVcXdMB1_YA?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
i'm using this to load the video, but i would like to have for example a link, saying "Play Video", and when the user click the link, the video start to play, all i've tried ends up in nothing, i even think that it is no way to do this, but to be sure, i came here to SO.

Categories

Resources