I currently have a flex video on my page that starts playing when the page is loaded.
How do I stop it from playing automatically?
<div class="flex-video">
<iframe width="300" height="300" src="video.mp4" frameborder="0" allowfullscreen></iframe>
</div>
If you embed your own video using iFrame then it will just play automatically. What you can do is to use a video player. You can also use the html video tag like this:
<video controls>
<source src="video.mp4" type='video/mp4'/>
</video>
Related
There are many solutions out there on how to make youtube/vimeo autoplay a video but they don't seem to work on a local video:
<template>
<section id="vision" class="vision">
<iframe src="videos/cgi_neutral.mp4?autoplay=1" allow="autoplay" allowfullscreen="true"></iframe>
</section>
</template>
This does not autoplay.
First, instead of using an iframe, use a <video> tag. (Because its self-hosted on your website, no need to use an iframe) To make it autoplay, just add the "autoplay" attribute.
For Example:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
I'm using Bootstrap 4. My embedded video plays automatically when the page loads. My code is:
<div class="embed-responsive embed-responsive-16by9 hoverable video-1 video-align">
<iframe class="embed-responsive-item" src="myvideo.mp4" allowfullscreen></iframe>
</div>
How do I stop the auto-play, please?
Don't use an iframe; use the video tag. An inline frame is there to display another document on the page and is automatically rendered when the page is loaded. In case of a video, it is automatically played.
You can use the autoplay="false" like this:
<video width="640" height="480" controls="controls" type="video/mp4" preload="none">
<source src="myvideo.mp4" autoplay="false">
Your browser does not support the video tag.
</video>
That should be it.
Use this additional parameter for the iframe:
autoplay="false"
I have added a code for playing video as a banner but facing one problem in that is whenever the video is completed getting a black screen for a moment and again the video is playing.
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted" width="100%" height="400"><source src="http://localhost/blue/wp-content/uploads/2019/03/4K_UHD_Drone_Fly_Past_Radio_Tower_Portland_Oregon_Crest_Point_Fernando-1.mp4" type="video/mp4"></video></div>
I have tested this in all the browser. Please take a look to the attributes in this tag and this will also work in your case.
<video width="400" controls playsinline loop muted >
<source src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
UPDATE: newer versions of mobile phone browsers on Android and iOS do support autoplay function. But it only works if the video is muted or has no audio channel. :-)
For more details on the UPDATE section read this:
https://webkit.org/blog/6784/new-video-policies-for-ios/
I've amended your tag a little to include autoplay loop instead of autoplay="true" loop="loop".
I also think you've just got your HTML syntax a little wrong - instead of putting the source in a <source> tag, you should include a src="" within the <video> tag like so:
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop muted="muted" width="100%" height="400" src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4"></video>
</div>
As you can see there's no black screen at the end of this looping video. If it is still happening on for you with your own material, it might actually be your video that has a slight gap at the end?
Here is my html for making my video autoplay and loop with no problems. Give this a try.
<video muted autoplay loop>
<source src="" type="video/mp4" />
</video>
YouTube allows people to embed their videos. How do I make this feature for my videos? Looking for guidance or a tutorial because I don't have a clue.
Youtube gives an iframe with src pointing to a page that contains only a video.
<iframe width="560" height="315" src="//www.youtube.com/embed/1PtR6qtdi1s" frameborder="0" allowfullscreen></iframe>
Do you see that src is equal to? http://www.youtube.com/embed/1PtR6qtdi1s
Got it?
In HTML5 you can use the video tag.
<video width="320" height="240" controls>
<source src="src/to/video.mp4" type="video/mp4">
Your browser doesn't support HTML5 VIDEO!
</video>
Change values to desired width, height, src and video type (it supports mp4, webm and ogg).
I want to play video's using the HTML5 <video> tag and fancybox, with the links directing to youtube videos?
here's my code so far
<video width="480" height="270" controls="controls" poster="../images/youtube-logo.png">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/mp4">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/ogg">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/webm">
Your browser does not support the video tag.
<iframe width="480" height="270" type="application/x-shockwave-flash"
src="http://www.youtube.com/embed/1y8dYlBWOh4?wmode=opaque">
</iframe>
</video>
As you can see i also added an iframe tag to support older browsers.
But after some tweaking i can't get fancybox to open everything, in any of the videos in the video tag??
Thanks in Advance!
The direct YouTube links are 'refreshed', although they work for a moment the next day, they no longer work, cause the links are 'broken'.
the best way to play youtube videos in html5 is like so
<iframe width="480" height="270"
src="http://www.youtube.com/embed/1y8dYlBWOh4?html5=1">
</iframe>
the html5=1 tells Youtube to use html5 to play the videos, and NOT flash!