How to embed youtube video in my site

Hello experts, on my site - www.researchondogs.com - I would like to embed a youtube video underneath the "News & Events" column (instead of that plain old "Watch video" link you see). I've watched some video tutorials on how to do this regarding using the "embed" code that youtube generates, but nothing works for me. Would you be able to offer any help please?

Thanks
   Shawn
shawn857Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
Go to the YOutube page of the video you want to embed.  Under the video, click on 'Share' and then on 'Embed' and it will show you the code you need to use.  Note that the URL is not the same as the one in your address bar.  It will probably look something like this:
<iframe width="420" height="315" src="//www.youtube.com/embed/LIAZWb9_si4?rel=0" frameborder="0" allowfullscreen></iframe>

Open in new window

You should also know that not all videos can be embedded.  Some are not available for embedding.
0
shawn857Author Commented:
Yes Dave, as I mentioned, I tried this and it doesn't work on my webpage. I don't know if it's the <div> structure of my webpage or what, but that embed thing just doesn't work.

Thanks
   Shawn
0
Dave BaldwinFixer of ProblemsCommented:
The video that you are linking to is not a Youtube video so you can't use Youtube methods to link to it.  You will probably have to get permission from the owner to use it on your site.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Dave BaldwinFixer of ProblemsCommented:
I see nothing about your page that would prevent it.  Post the URL of the Youtube video you want to embed so I can check it out.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I used DaveBaldwin's first answer and it seems to work fine.
http://jsfiddle.net/dqeRm/1/
<!-- http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28239798.html -->
<div id="fb-root"></div>


<br>
<div class="fb-like" data-href="http://www.researchondogs.com/" data-width="100" data-show-faces="false" data-send="true"></div><br>

	<div id="header">
		<div id="menu">
			<ul>
				<li><a href="index.html" class="but1 active1">Home</a></li>
				<li><a href="aboutme.html" class="but2">About Me</a></li>
				<li><a href="faq.html" class="but3">FAQ</a></li>
				<li><a href="downloads.html" class="but4">Downloads</a></li>
                                <li><a href="contact.html" class="but5">Contact</a></li>
			</ul>
                </div>
             
                <br>
		<left><img src="http://www.researchondogs.com/images/main-picture_rounded_and_logo.jpg" alt="" /></left>
  	</div>
	<div id="wrapper">
	        <div id="left">
			<img src="http://www.researchondogs.com/images/WhatIDo.png" /><br />
<p>Hello and thank you for visiting my site! I specialize in internet research...
here's a brief explanation of what I am able to provide
you : As a Dog Research Specialist, I am able to do all the necessary
research for writers, editors, copywriters, publishers, novelists,
marketing strategists, companies, or for anyone who may be in need of
reliable, credible, focused, relevant information.</p>

<p>Let me do the research for you - and deliver it on a silver platter
for you and your writers to use. I'll sort and sift through the
millions and millions of pages of content on the Internet - focusing
on credible, reputable and quotable sources your writers can use to
provide maximum proof and credibility behind what they're writing about. I'll find
out what's most relevant and leave out the rest. All my research is compiled into a single word
document delivered to you with the appropriate source citations for your
future reference.</p>

<p>You will enjoy the benefits of solid and thorough research, extra time, and increased
revenue.</p>

<p>Most projects can be conveniently completed via email. Prior to my
research, I will provide a form in which you complete with
all the requirements for your project.</p>

<p>After your project is complete I am also available to do any proofreading.</p>


                </div>
		<div id="right">
			<div>
				<img src="http://www.researchondogs.com/images/NewsAndEvents.png" /><br />
				<span class="date">Sept 14, 2013</span>
				<p><b>Survey Spotlight: Global Trends in Pet Care</b><br><br>
  Eileen Bevis, Survey Manager and Lisa Holmes, Survey Analyst discuss pet
care, an industry poised for growth around the world. Bevis and Holmes
discuss pet ownership in developed vs. emerging markets, pet food buying
habits and opportunities for pet care companies worldwide.</p>

				<a href="http://euromonitorintl.wistia.com/medias/f8qsq8ui2v" target="_blank">Watch video</a>
                    
                <iframe width="560" height="315" src="//www.youtube.com/embed/8Jh2_2z92mw" frameborder="0" allowfullscreen></iframe>    
                    
			</div>

		</div>
	</div>
	<div id="footer">
		<ul>
			<li><a href="index.html">Home</a>|</li>
			<li><a href="aboutme.html">About Me</a>|</li>
			<li><a href="faq.html">FAQ</a>|</li>
			<li><a href="downloads.html">Downloads</a>|</li>
			<li><a href="contact.html">Contact</a>|</li>
		</ul>
		<p>Copyright &copy; 2013. All rights reserved. </p>
	</div>

Open in new window

0
shawn857Author Commented:
hey guys, it worked fine! My mistake was that I wasn't uploading my changes to my FTP server... I only tested it locally on my computer and the video wasn't coming up - guess it needs to be uploaded to see the fixes.
   Anyway, I wanted to change the size of the video so I modified the line:

<iframe width="560" height="315" src="//www.youtube.com/embed/8Jh2_2z92mw" frameborder="0" allowfullscreen></iframe>

... to this:

<iframe width="280" height="158" src="//www.youtube.com/embed/8Jh2_2z92mw" frameborder="0" allowfullscreen></iframe>

but it moved the location of the video up so it's overwriting the text above. Please see www.researchondogs.com again. Probably something really simple I need to do to fix it...

Thanks!
    Shawn
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Try giving the iframe a class called myClass and adding the following css which will push the iFrame down.

.myVideo{margin-top:30px;}
0
shawn857Author Commented:
Thanks padas, but I don't know how to use CSS very well. I've never used "classes" ever.

Thanks
    Shawn
0
Dave BaldwinFixer of ProblemsCommented:
Add <br clear="all"> after the </p> tag.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
<iframe class="myVideo" width="280" height="158" src="//www.youtube.com/embed/8Jh2_2z92mw" frameborder="0" allowfullscreen></iframe>

I would suggest you start here http://www.codecademy.com/tracks/web to get the basics
0
shawn857Author Commented:
Thanks Dave, that did the trick!

Cheers
   Shawn
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.