April 5, 201412 yr Hi all, I've been at this for hours now and I can't seem to crack it. Any help would be greatly appreciated. I'm trying to embed a YouTube video in/on to an image. I've designed my image in Photoshop, leaving a 633x356px place holder for the video. I've sliced the image up + created the HTML file. In the HTML doc I replaced the place holder image code with the YouTube embed code and previewed in Chrome/FireFox/IE and it all looks perfect. However, when I upload the files to a Wordpress blog and amend the HTML to point to the corrent image locations, this is what I see - notice how it breaks up in the middle? When I remove the video and just use the place holder image, the whole thing stays together (like this) and doesn't break up. Can anyone shed any light on this please? I feel like I've tried everything. I've tried using both YouTube embed options (iframe and object). Thanks
April 6, 201412 yr Author I know Photoshop isn't ideal but I thought it would be ok for the purpose of adding a video on to an image? Here is the HTML I'm using, I just can't see why the image breaks up when I add the video. The video is the exact same size as the place holder image. I've even tried reducing the video size but the image still breaks up. <table id="Table_01" width="900" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td colspan="3"><img alt="" src="http://sodigitalmarketing.com/wp-content/uploads/2014/04/test_01.jpg" width="900" height="297" /></td> </tr> <tr> <td><img alt="" src="http://sodigitalmarketing.com/wp-content/uploads/2014/04/test_02.jpg" width="132" height="356" /></td> <td> <iframe width="633" height="356" src="//www.youtube.com/embed/Mu8uRMMcQp0" frameborder="0" allowfullscreen></iframe> </td> <td><img alt="" src="http://sodigitalmarketing.com/wp-content/uploads/2014/04/test_04.jpg" width="135" height="356" /></td> </tr> <tr> <td colspan="3"><img alt="" src="http://sodigitalmarketing.com/wp-content/uploads/2014/04/bottom_05.jpg" width="900" height="4204" /></td> </tr> </tbody> </table>
April 6, 201412 yr Author No, sorry I should have explained that. I'm creating an infographic which will include an embedded video. Can you spot any faults in the HTML?
April 6, 201412 yr putting vertical-align: top on the iframe helped a little, but there is still an annoying gap. The code on the page is an absolute mess. My suggestion would be to have the image as normal, and absolute position the iframe on top of it where you nede.
April 6, 201412 yr Author Thanks for looking at it. I'll do a bit of reading in to absolute position and see if I can crack it. Cheers
April 8, 201412 yr Author Hi again, I've spent the last 2 days learning about absolute positioning and I've managed to get the video positioned anywhere I want on top of the image - so thanks again for the heads up. However, when I resize my browser the video seems to jump out of position and I can't for the life of me work out how to fix it. This time I'm using a single background image titled 'bottom_05' Would you mind taking a quick look again please? http://sodigitalmarketing.com/?p=4913 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #testimg{ float:left; position: relative; width: 900px; height: 4204px;} #vid1{ position: absolute; width: 633px; height: 356px; left: 200px; top: 500px} </style> </head> <body> <div id="testimg"> <img src="http://sodigitalmarketing.com/wp-content/uploads/2014/04/bottom_05.jpg"> <div id="vid1"> <object width="633" height="356"><param name="movie" value="//www.youtube.com/v/py6zXJoS-cE?version=3&hl=en_GB"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/py6zXJoS-cE?version=3&hl=en_GB" type="application/x-shockwave-flash" width="633" height="356" allowscriptaccess="always" allowfullscreen="true"></embed></object> </div> </div> </body> </html> Thanks
April 9, 201412 yr I'm on a tablet so I can't really test but since your site is a fixed with, it shouldn't be jumping out of position when you resize your browser. I'll have to test your page later.
April 9, 201412 yr Author Thanks. I thought it might have something to do with my Wordpress theme being responsive? I've deselected the responsive option but it doesn't seem to have fixed it.
April 10, 201412 yr The code that you have posted here is correct. However that is not the same code that is on your test site. If you want your site to be responsive, use perctages when you absolue position instead of a set px. Also, Youtube videos will not inheritly adjust because of it's container. You may want to use a jquery script called fitvid.
April 10, 201412 yr Author I've been through the code line by line on the blog post and I'm 100% sure the code I've posted here is the same as on my site. I've also looked at 'view source' and it looks the same there too. The site/asset doesn't have to be responsive. Is the video jumping out of position when you change your browser size?
April 11, 201412 yr Author When I inspect the element using Chrome dev tools I can see the code as written here. I can't seem to work out what I'm doing wrong?
April 12, 201412 yr I just looked your styles. Your CSS for #testimg isnt there so it doesn't have position: relative. Your markup seems to be correct, but your CSS at least for the video is missing.
June 19, 201412 yr you just select the video embed code from youtube page. and past that code in your page where you want play them. for ex: <iframe width="420" height="315" frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/WLuWWcN5vLM">
Create an account or sign in to comment