I want to show videos on my website, but I want those video to be inside a phone frame, for eg

I want the video to be playing inside something like that white phone frame.

Hope I was clear enough. But I have no ideas, on how to actually do this. Thanks

I want to show videos on my website, but I want those video to be inside a phone frame, for eg

I want the video to be playing inside something like that white phone frame.

Hope I was clear enough. But I have no ideas, on how to actually do this. Thanks

Share Improve this question edited Dec 10, 2019 at 11:46 Mohsen Haghighatkhah 4465 silver badges23 bronze badges asked Dec 10, 2019 at 10:31 user8585349

Use phone frame image in background or in pseudo :before, :after – Aman Commented Dec 10, 2019 at 10:35

Add a ment |

2 Answers 2

Sorted by: Reset to default 9

Hope this helps someone:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="smartphone">
  <div class="content">
    <iframe src="https://wpcoder.co.uk/links/mixkit-man-holding-neon-light-1238-large.mp4" style="width:100%;border:none;height:100%" />
  </div>
</div>

</body>
</html>

CSS:

/* The device with borders */
.smartphone {
  position: relative;
  width: 360px;
  height: 640px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

/* The horizontal line on the top of the device */
.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* The screen (or content) of the device */
.smartphone .content {
  width: 360px;
  height: 640px;
  background: white;
}

Live example: https://codepen.io/neilbannet/pen/WNvqNLR

Hosting the Video

You have two options:

Host the video yourself on your server and embed it in the webpage using video and source tags. HTML:

<video>
   <source src="video.mp4" type="video/mp4" />
   <!-- src and type are an example -->
</video>

(Most popular option) Host the video on a third-party service, such as YouTube, Vimeo, or Dailymotion. Then all you need to do is embed the video, an option usually found in the share menu.

Placing Video on Phone Image

Once you have embedded the video onto your webpage, embed an image of a phone onto the webpage. You might have your image of a phone you want to use, or you could import one from one of the three largest copyright-free image sites:

Unsplash
Pexels
Pixabay

Once you have embedded both video and image onto your webpage, then start editing the HTML and CSS:

Give the video a higher z-index than the image, so that it appears above it. CSS:

/* For Video: */

/* Use this if you hosted the video yourself: */

video {
    z-index: 999; /* any value greater than img's */
}

/* Use this if you used a host: */
iframe {
    z-index: 999; /* any value greater than img's */
}

/* For Image: */

img {
    z-index: -999; /* any value smaller than video's */
}

Set the video's position to absolute in the CSS so that it doesn't appear alongside the image, and add pixels on the left, right, top, and/or bottom so that it is positioned exactly on the image of the phone. CSS:

/* Use this if you hosted yourself: */

video {
    position: relative;
    top: 10px; /* example */
    left: 5px; /* example */
}

/* Use this if you use a host: */

iframe {
    position: relative;
    top: 10px; /* example */
    left: 5px; /* example */
}

Now adjust the video's height and width until it fits perfectly into the phone screen. HTML:

<!-- Use this if you hosted the video yourself: -->

<video>
   <source src="video.mp4" type="video/mp4" width="100px" height="500px" />
   <!-- src, type, width and height are an example -->
</video>

<!-- If you used a host, edit width and height in embed tag(s) they provided: -->

<iframe width="100px" height="500px"></iframe>
<!-- Width and height are an example -->

I have managed to achieve this by placing a music video from YouTube onto an image of a phone from Unsplash: JSBin Or run code snippet from here:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Video in Phone</title>
  <style>

    iframe {
      position: absolute;
      z-index: 9999;
      left: 115px;
      top: 133px;
    }

    img {
      z-index: -9999;
    }

  </style>
</head>
<body>
<img src="https://images.unsplash./photo-1505156868547-9b49f4df4e04?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80" height="500px" />
<iframe width="140px" height="250px" src="https://www.youtube./embed/uYg4cUyJ7v0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to simulate a phone frame playing videos on my website? - Stack Overflow

2 Answers 2

Hosting the Video

Placing Video on Phone Image

与本文相关的文章

评论列表(0)