Forums

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

Permalink
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 at Permalink Reply
MrKDilkington
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.
shawnwatts replied on at 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 at Permalink Reply
MrKDilkington
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.