Title: Adding Image Behind Embedded YouTube Video?
Last modified: August 22, 2016

---

# Adding Image Behind Embedded YouTube Video?

 *  Resolved [prayersnapples](https://wordpress.org/support/users/prayersnapples/)
 * (@prayersnapples)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/adding-image-behind-embedded-youtube-video/)
 * 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](http://prayersandapples.com/highlights/?preview=true&preview_id=475&preview_nonce=73f56f3710)(
   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('http://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)

 *  [chris1design](https://wordpress.org/support/users/chris1design/)
 * (@chris1design)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/adding-image-behind-embedded-youtube-video/#post-5752658)
 * 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](https://wordpress.org/support/users/prayersnapples/)
 * (@prayersnapples)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/adding-image-behind-embedded-youtube-video/#post-5752661)
 * 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): [http://prayersandapples.com/highlights/](http://prayersandapples.com/highlights/)
 * Thank you for your reply!
 *  [chris1design](https://wordpress.org/support/users/chris1design/)
 * (@chris1design)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/adding-image-behind-embedded-youtube-video/#post-5752854)
 * 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](https://wordpress.org/support/users/prayersnapples/)
 * (@prayersnapples)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/adding-image-behind-embedded-youtube-video/#post-5752920)
 * 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.

## Tags

 * [embedded video](https://wordpress.org/support/topic-tag/embedded-video/)
 * [overlay image](https://wordpress.org/support/topic-tag/overlay-image/)
 * [Youtube](https://wordpress.org/support/topic-tag/youtube/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [prayersnapples](https://wordpress.org/support/users/prayersnapples/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/adding-image-behind-embedded-youtube-video/#post-5752920)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics