Developing (v7+)

Help! - Place a video over a static image (iPad)

Permalink January 01, 2015 at 2:28 PM

I am a Concrete5 newbie using 5.6.2. My homepage has an image block with a person holding an iPad. I would like to overlay a video (.mp4 and ogv) inside the iPad image to demonstrate our company presentation. Can someone please guide me?

Another note: The video needs to stay stationary to the image behind.

MrKDilkington replied on Jan 1, 2015 at 6:55 pm Permalink Reply

Hi shawnwatts,

Here is example HTML and CSS to do what you are asking for. Your video will need an aspect ratio of 4:3 to match the iPad display aspect ratio of 4:3.

http://codepen.io/anon/pen/bNBeeJ...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video in an iPad</title>
<style>
    .ipad {
        position: relative;
        height: 600px;
        background: url('http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png') no-repeat;
    }
    .overlay {
        position: absolute;
        width: 548px;
        top: 67px;

Viewing 15 lines of 28 lines. View entire code block.

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video in an iPad</title>
<style>
    .ipad {
        position: relative;
        height: 600px;
        background: url('http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png') no-repeat;
    }
    .overlay {
        position: absolute;
        width: 548px;
        top: 67px;
        left: 121px;
    }
</style>
</head>
<body>
    <div class="ipad">
        <video class="overlay" controls>
            <source src="http://www.rwardell.com/rtw/video/diving.mp4" type="video/mp4">
            <source src="http://www.rwardell.com/rtw/video/diving.ogg" type="video/ogg">
            Your browser does not support HTML5 video.
        </video>
    </div>
</body>

shawnwatts replied on Jan 3, 2015 at 9:57 pm Permalink Reply

Dear Mr K,

Where do I place the code provided by you?

- Add within Concrete 5 edit mode using an HTML block
- Use Dreamweaver to add into source code
- or other way

Thank you for your assistance.

MrKDilkington replied on Jan 3, 2015 at 10:35 pm Permalink Reply

To narrow down the options - do you know any PHP?

I believe it could be added with an HTML block if you had the path of the image and video (which can be the path found in the file manager or based on your site root).

Is this something that will be on your site for a short period or a long period?

To use the example I have above in the HTML block. It would look like this.

<style>
    .ipad {
        position: relative;
        height: 600px;
        background: url('http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png') no-repeat;
    }
    .overlay {
        position: absolute;
        width: 548px;
        top: 67px;
        left: 121px;
    }
</style>
<div class="ipad">
    <video class="overlay" controls>

Viewing 15 lines of 20 lines. View entire code block.

 
<style>
    .ipad {
        position: relative;
        height: 600px;
        background: url('http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png') no-repeat;
    }
    .overlay {
        position: absolute;
        width: 548px;
        top: 67px;
        left: 121px;
    }
</style>
<div class="ipad">
    <video class="overlay" controls>
        <source src="http://www.rwardell.com/rtw/video/diving.mp4" type="video/mp4">
        <source src="http://www.rwardell.com/rtw/video/diving.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
    </video>
</div>

Forums

Developing (v7+)

Help! - Place a video over a static image (iPad)

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?