How to center embed in wordpress

Developers Stream
1

Type

Video

What is the issue you’re encountering

I only need the code to center the embed --it sits to the left

What are the steps to reproduce the issue?

I have messed about with the position but had no joy. Thank you

2

I did actually add the embed code in there but it is not showing in the post in the post topic I created.

3

I tried again, and it deleted it.

Here is a piece of the code that neds changing. Lets see if it deletes it –

style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;
4

I have changed the height and width to 75% as I don’t want it so wide. Now I just need to know how to center it.

Had a look at the Stream WP plugin and it has pretty much died
before it got life.

style="border: none; position: absolute; top: 0; left: 0; height: 75%; width: 75%;
5

I am afraid this question is a bit out of scope of these forums.
I’d suggest asking to the StackOverflow and looking for answers there or some other codding related source such as JSFiddle.

However, is it iFrame or? :thinking:
Want to center it horizontally, or vertically, or both? :thinking:

You’d need to place it inside div element and add some CSS to get it right (one more div if you cannot afford to put directly to the body tag as I assume).

Example centered horizontally and vertically:

slika
slika717×458 50.9 KB

Code (change YOUR_CUSTOMER_ID and VIDEO_ID):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Cloudflare Stream Player</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center; /* Horizontal centering */
      align-items: center;   /* Vertical centering */
      background-color: #f4f4f4; /* Optional background */
    }
    .player-container {
      width: 100%;
      max-width: 640px; /* Adjust as needed */
      aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
    }
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <div class="player-container">
    <iframe src="https://customer-YOUR_CUSTOMER_ID.cloudflarestream.com/VIDEO_ID/iframe" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
  </div>
</body>
</html>

Related to the Cloudflare Stream? :thinking:

Just use below example(s) and modify the code as needed, since it’s responsive and you can put Text directly to the “Code View” of your WordPress post or page.

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.