How do I get my embedded Youtube videos larger?

Developer help
1

  • What’s your URL? https://hawkinsaeger.com/

  • What version of Ghost are you using? 4.1.1

  • How was Ghost installed and configured?

Installed on digital ocean droplet

  • What Node version, database, OS & browser are you using?

Using Windows 10 right now, mySql database, and node version v14.16.1
I use the Brave browser which is built on the same platform as google chrome. I tested Microsoft Edge as well.

  • What errors or information do you see in the console?

So the main issue here is that I am using the Ghost embed feature for Youtube videos and the video is really tiny in relation to the browser window. Is there a CSS fix to have the youtube video the width of the browser, and can dynamically change depending on the device/ browser width?

See the screenshot for what I see. I am using Casper as my theme which I customized slightly to change a few aspects. I haven’t edited anything about videos in changing the theme though.

image
image1511×612 85.7 KB

2

On a YouTube video, click Share > Embed. Copy the <iframe>... code and paste it in a text editor. Scale up the size to a width of 720 - if the original iframe code says width="560" height="315" you can change it to width="720" height="405".

In your Ghost blog, click “+” next to a new paragraph and choose “HTML / Insert a raw HTML card”. Then copy and paste the modified <iframe> code. It’ll look right once you publish.

3

I ended up using the following code in an html block and it worked. I was having some issues with the Casper theme so I switched to Liebling:

.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
5

This is what I use with the default YouTube embed (where you just paste a YouTube link and Ghost handles the rest, rather than copying the iframe embed code).

.kg-embed-card:has(iframe[src*="youtube"]),
.kg-embed-card:has(iframe[src*="vimeo"]) {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
}

.kg-embed-card iframe,
.kg-embed-card object,
.kg-embed-card embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Caveat: the video thumbnail might be a bit low-res, depending on the actual embed code.