0

I want to add a video inside a div (I want to make it as a background-video for this element).

I add the video and I see the first image of the video, but it won't start/play.

As I read about HTML5 and video I think I have set all the properties it will need, but there must be a mistake which I can't see.

<div class="myclass" id="caption" contenteditable="true">
<video autoplay="" loop="" id="video-background-7608" muted="" plays-inline="" poster="">
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&amp;profile_id=119&amp;oauth2_token_id=57447761" type="video/mp4"></video>

some content in my <span>div</span>
<img...>
</div>

I see no errors in the console or in the network-report.

Here https://dev.w3.org/html5/pf-summary/video.html#attr-media-autoplay I read "The autoplay DOM attribute must reflect the content attribute of the same name"

Cloud it is the point I need? What does it mean?

Thanks for helping me to solve it!

Kingsley
  • 14,398
  • 5
  • 31
  • 53
mikeD
  • 229
  • 2
  • 11
  • it works for me. chrome browser. please check the following which seems similar: https://stackoverflow.com/questions/16965170/html5-video-autoplay-not-working-correctly – jcuypers Feb 21 '19 at 07:53
  • i thinks there must be another problem. If i copy the code from https://codepen.io/mattgrosswork/pen/jrdwK, into my page i have the same problem, i see only the first image or the poster – mikeD Feb 21 '19 at 08:05
  • I think its based on browser defaults... like i said chrome works. the reference article states also something about audio etc – jcuypers Feb 21 '19 at 08:07
  • the codepen works for me too – jcuypers Feb 21 '19 at 08:13
  • Ignores the autoplay attribute by default, though autoplay behavior can be enabled by users (https://caniuse.com/#feat=video). – Kunj Feb 25 '19 at 04:23

3 Answers3

1

Try to remove contenteditable="true" in your div.

<div class="myclass" id="caption">
    <video controls autoplay>
        <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&amp;profile_id=119&amp;oauth2_token_id=57447761" type="video/mp4">
    </video>
</div>
Mathieu Vincent
  • 31
  • 7
0

Try setting autoplay="autoplay" You are most likely experiencing a browser problem or have an extension or something preventing it from autoplaying.

Similar question as mentioned

andrewjazbec
  • 859
  • 8
  • 20
  • autoplay="autoplay" wont help...i thinks there must be another problem. If i copy the code from codepen.io/mattgrosswork/pen/jrdwK, into my page i have the same problem, i see only the first image or the poster – mikeD Feb 21 '19 at 08:03
  • Try running it in a different browser – andrewjazbec Feb 21 '19 at 08:05
  • at codepen i see the video play - so i think its a problem with my site, server, settings or what else – mikeD Feb 21 '19 at 08:06
0

Most browsers require the user to initiate the video if it's not muted. Try muting it.

Like this:

<div class="myclass" id="caption" contenteditable="true">
<video autoplay="" loop="" id="video-background-7608" muted="muted" plays-inline="" poster="">
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&amp;profile_id=119&amp;oauth2_token_id=57447761" type="video/mp4"></video>

some content in my <span>div</span>
<img...>
</div>
metamonkey
  • 427
  • 7
  • 33
  • Please don't add the same answer to multiple questions. Answer the best one and flag the rest as duplicates. See [Is it acceptable to add a duplicate answer to several questions?](//meta.stackexchange.com/q/104227) – Dharman Aug 19 '19 at 19:22