Adding Image Behind Embedded YouTube Video?

  • Resolved prayersnapples

    (@prayersnapples)


    9 years, 9 months ago

    Hi, I’m trying to make an embedded YouTube video appear as though it’s playing on vintage TV. I achieved mild success by adding the following code to the HTML on that page and my CSS stylesheet, but the video doesn’t fit properly within the TV screen image and I’m not sure how to adjust it?

    Another major problem I’m encountering is my site is mobile-responsive, and when I change my window size the video changes sizes (so sometimes the video is wider than the image – say when viewed on a full screen PC, and sometimes it’s smaller – when viewed on my iPhone).

    My attempt may be viewed here (scroll down to the bottom).

    Here is what I have tried in the HTML of my page:

    <div class="youtube">

</div>

    Here is what I have tried in my CSS:

    div.youtube {
	background: url('https://prayersandapples.com/wp-content/uploads/2015/02/TV-Vintage-Background.png');
	padding: 75px;
	background-repeat: no-repeat;
}

    The image size is 800 x 503 (however, as you’ll notice, the ‘screen’ part that I would like the image to play in is a bit smaller and aligned more to the left within the image.

    (If I could get the TV centered in the page, that would be an added bonus!)

    If anyone has any advice, I’d greatly appreciate it. I’m not very savy at all this, so if you wouldn’t mind please include as many details as possible ?? Thank you in advance so much!

    (My website is: PrayersAndApples.com.)

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi prayers and apples,

    Nice site but I don’t see the video and the tv on your site. The link you put on your page

    My attempt may be viewed here (scroll down to the bottom).

    is not accessible. Can you tell me where is that vintage TV?

    God Bless, Christian

    Thread Starter prayersnapples

    (@prayersnapples)

    Hi Chris,

    I apologize, I’m not sure why it didn’t link correctly. Here is the page (the tv/video is at the very bottom): https://prayersandapples.com/highlights/

    Thank you for your reply!

    Hi Jessica,

    I directly put your movie behind the TV in Photoshop and then uploaded it in Wistia. If you just copy this code and paste it wherever in your post it will display correctly and centered.

    <iframe src="//fast.wistia.net/embed/iframe/x994s8erc6?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="480"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js"></script>

    This will give you a link to your movie in my Wistia account. If you want to upload the movie itself on your computer then I’ll need your email and you can upload it on Google Drive.

    It is set to occupy the whole width of the page and has 2 black bars one on top and one at the bottom but this I cannot remove. Hope that helps. Regards Chris

    Thread Starter prayersnapples

    (@prayersnapples)

    Thanks again, Chris! It looks wonderful!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding Image Behind Embedded YouTube Video?’ is closed to new replies.