How can I design this in HTML/CSS,

• video is as full div background in blurred way.

• Play button - will play the video.

• h1 tag p tag on top of video

Please put me in a right direction, Thanks

How can I design this in HTML/CSS,

• video is as full div background in blurred way.

• Play button - will play the video.

• h1 tag p tag on top of video

Please put me in a right direction, Thanks

• javascript
• html
• css
• html5-video

• Please provide a Minimal, Complete and Verifiable Example.please read this stackoverflow./help/mcve Don't provide external links to any images or videos – core114 Commented Oct 11, 2017 at 6:55

3 Answers 3

Try This:

$(document).ready(function(){
    $('.play').click(function () {
        if($(this).parent().prev().get(0).paused){
            $(this).parent().prev().get(0).play();
            $(this).parent().prev().removeClass('blurEffect');
            $('.content').hide();
        }
    });

    $('.video').on('ended',function(){
        $(this).addClass('blurEffect');
      $('.content').show();
    });
})

.wrapper {
    position: relative;
    display: inline-block;
}

.blurEffect {
    -webkit-filter: blur(7px);
    -o-filter: blur(7px);
    -moz-filter: blur(7px);
    -ms-filter: blur(7px);
    filter: blur(7px);
}

.content {
    position: absolute;
    display: inline-block;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    color: #FFF;
    width: 100%;
    text-align: center;
    z-index: 999;
}

.play {
    font-size: 50px;
    cursor: pointer;
    border: 1px solid #FFF;
    display: inline-block;
    text-align: center;
    padding: 5px 25px;
}

.play:hover {
    color: red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
    <video class="video blurEffect"> 
        <source src=http://techslides./demos/sample-videos/small.webm type=video/webm> 
        <source src=http://techslides./demos/sample-videos/small.ogv type=video/ogg> 
        <source src=http://techslides./demos/sample-videos/small.mp4 type=video/mp4>
        <source src=http://techslides./demos/sample-videos/small.3gp type=video/3gp>
    </video>
        <div class="content">
            <div class="play">►</div>
            <h1>Watch the movie</h1>
            <p>Other text. Other text. Other text. Other text. </p>
        </div>
</div>

1. You can use CSS property:position ,left and top to change location of html elements.

2. HTMLMediaElement has a method named play(),you can call play() in javascript to make <video> to start playing video. About HTMLMediaElement,look at this page.

3. You can use z-index CSS property to make sure that <button>,<h> and <p> is on top of . About z-index,look at this page.

I have created a simple Codepen document that will point you in the right direction. It's using HTML and CSS elements only, with minimal code.

It's also using a CSS filter called blur to blur the background image and using scale to increase the size of the image to ignore the white borders the blur filter applies.

LINK TO CODEPEN

HTML

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="wrapper"></div>

<div class="center">
  <i class="fa fa-play" aria-hidden="true"></i>
  <h1>Watch the others</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit enean semper mattis elementum/</p>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  position: fixed;
  background: url(https://static.pexels./photos/67636/rose-blue-flower-rose-blooms-67636.jpeg) no-repeat center center fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  filter: blur(10px);
  transform: scale(1.1);
}

.center {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  color: #fff
}

.center i {
  font-size: 3em;
}