How To Add A Responsive Autoplay Video With No Player Options And Logos

**phantomnote** · 02-27-2016, 08:32 PM

Heya!

I'd like to know how do I add a video like the one on this website:
Freedom Studios | The Official #1 Entrepreneur Training Community

With autoplay and no "timeline" on video - and furthermore no youtube/vimeo logo. What kind of player is being used here?
And what kind of code would be needed for a player to act like this?

Thanks in advance, and cheers

**coothead** · 02-27-2016, 11:12 PM

Hi there phantomnote,

and a warm welcome to these forums.

Here is a very basic example...

Code:


<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
div {
    max-width:50em;
    margin:auto;
    border:0.4em double #999;
 }
video {
    display:block;
    width:100%;
 }
</style>

</head>
<body> 

<div>
 <video autoplay>
  <source src="http://coothead.co.uk/videos/QuentinSommerville.mp4" type="video/mp4">
 </video>
</div>

</body>
</html>

coothead

**phantomnote** · 02-28-2016, 06:11 PM

Thank you for the welcome and thanks for the quick response!

However, wasn't quite what I was looking for. I need something that has a loader like in the link, and still possibility to play and not to play.

Basically exactly the same as in the link provided

Thanks in advance

**Sempervivum** · 02-28-2016, 07:32 PM

I see two possibilities to realize this:

Use mediaelement player. I use it myself and it allows for configuring which controls to be shown. However the controls will be displayed at the bottom.
If you want the button for stop/play centered (which I myself don't like), position it absolutely above the video and code stop and play via the API.

**coothead** · 02-29-2016, 01:11 AM

Hi there phantomnote,

I have added the extras, as requested.

It also works for thos with javascript disabled.

Check out the attachment....

coothead

**phantomnote** · 02-29-2016, 02:48 PM

That looks spot on! Thank you so much, Ill try and see if I can wrap my head around implementing it properly to my site again.

Cheers

**phantomnote** · 02-29-2016, 02:50 PM

p.s. love the choice of video

**phantomnote** · 02-29-2016, 05:04 PM

Okay - tried to add it to my site:
identitypuzzle.com

I did get rid of the border, however I cant seem to get rid of the shadow? Where is that?
Also - how do I control the width of the video? It's too small on the site.

Thanks in advance, and cheers for all the help so far - much appreciated!

**coothead** · 02-29-2016, 06:16 PM

Hi there phantomnote,

I cannot see any trace of a "video element" here..

http://identitypuzzle.com/

coothead

**vgonzales11** · 05-12-2016, 12:08 AM

I stumbled onto this thread while having a similar issue and this code worked perfectly for me!!

Thanks so much for sharing this.

By chance, do you happen to know how to code an overlay for the mp4 with centered text and a button with a link?

**coothead** · 05-12-2016, 01:11 AM

Hi there vgonzales11,

and a warm welcome to these forums.

Check out the attachment, it may suit your requirements.

coothead

**vgonzales11** · 05-12-2016, 07:31 AM

Rock the Kasbah!!! =) I'm struggling to remove the video controls, though. Seemed like it'd be easy. What am I missing... (comically vague?

Here's a peek at what I'm working on... greatgreentree.com/

**vgonzales11** · 05-12-2016, 07:32 AM

And thank you so much!!! =)

**coothead** · 05-12-2016, 11:54 AM

Hi there vgonzales11,

to remove the controls, place this script directly before the closing body tag - ( </body> )...

Code:


<script>
(function() {
   'use strict';
   setTimeout(
      function(){
      document.getElementsByClassName('mejs-controls')[0].style.display='none';
      },1000);
}());
</script>

coothead

**vgonzales11** · 05-13-2016, 02:37 AM

Eek! No dice. Lots of crazy stuff started happening.

So I'm working with Weebly and in my header html file I've added this to ensure the video appears when I embed the code with their drag and drop:

<div id="video">{video:content}</div>

Then I'm pasting the code I got from you into the embed code box and it's working great!:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
div
</style>

<body>

<div>
<video autoplay>
<source src="https://dl.dropboxusercontent.com/u/95841593/Kozan%20Videos/Coming%20Soon%20Best%20(1).mp4">
</video>
</div>

I just need to know how to overlay the text and link on this.

And thanks so much for all of your help thus far!! Picking your brain is a life-saver!! =)

Thread: How To Add A Responsive Autoplay Video With No Player Options And Logos

Thread Tools

Rate This Thread

How To Add A Responsive Autoplay Video With No Player Options And Logos

made it work for non-javascript

Tags for this Thread

Posting Permissions