-
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.
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.
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%;
}
Thanks for the help, guys. It’s worked. I’ve recently installed Ghost, so I need some time to understand how it works. It’s hard to fix such problems when you’re an old man (I’m 58), you know. Actually, it’s easier for me to find more about how to buy subscribers for my gardening youtube channel than embedding the video. Actually, that channel is my only passion. Anyway, thanks for your help. Ugh, I wish I had a son who could help me. Still, I’m glad I have you, guys. Best wishes to you all.
