Link to home
Start Free TrialLog in
Avatar of shawn857
shawn857

asked on

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
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

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.
Avatar of shawn857
shawn857

ASKER

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
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.
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.
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

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
Try giving the iframe a class called myClass and adding the following css which will push the iFrame down.

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

Thanks
    Shawn
ASKER CERTIFIED SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
<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
Thanks Dave, that did the trick!

Cheers
   Shawn