Go Back   Tech Support Forum > Design Forum > Web Design & Development

User Tag List

Placing YouTube Video Code

This is a discussion on Placing YouTube Video Code within the Web Design & Development forums, part of the Tech Support Forum category. Hello all, I am working with a CSS based template. I would like to post the following YouTube video code:


Closed Thread
 
Thread Tools Search this Thread
Old 04-21-2011, 10:09 AM   #1
TSF Enthusiast
 
Acer2000's Avatar
 
Join Date: Sep 2006
Posts: 1,353
OS: Windows 8.1


Question

Hello all,

I am working with a CSS based template.

I would like to post the following YouTube video code:

<iframe title="YouTube video player" width="293" height="237" src="https://www.youtube.com/embed/_7wSn8yVla4" frameborder="0" allowfullscreen></iframe>V

INTO THE FOLLOWING CODE (PICTURE IS TO BE REMOVED):

<div id="templatemo_content_right">
<div class="content_right_section_01" style="width: 308px; height: 227px">
<center><font color="#CD0021">On your IPad</font><p>
<img border="0" src="images/ipad-appstore.jpg" width="308" height="192"></p>
</center>
</div>

<div id="templatemo_content_right">
<div class="content_right_section_01" style="width: 308px; height: 227px">
<center><b>Video of the Week</b><p>
<img border="0" src="images/ipad-appstore.jpg" width="308" height="192"></p>
</center>
</div>V



my question to you is: Where exactly do I place the YouTube video code?

Thank you very much.

Acer2000 is offline  
Sponsored Links
Advertisement
 
Old 04-21-2011, 02:53 PM   #2
TSF Team, Emeritus
 
Join Date: Dec 2010
Location: Portland, OR
Posts: 5,202
OS:

My System


It all depends where you want it.

if it were me i would put it right above the line "<center><b>Video of the Week</b><p>"

This would put Video of the Week below the actual video itself.

If you want you can take a screenshot and describe where you want it and i will give you a better answer.
Laxer is offline  
Old 04-21-2011, 05:14 PM   #3
TSF Enthusiast
 
Acer2000's Avatar
 
Join Date: Sep 2006
Posts: 1,353
OS: Windows 8.1



Hi Laxer, Thank you very much indeed. That is exactly what I have originally thought. Thank you. Cheers
Acer2000 is offline  
Sponsored Links
Advertisement
 
Old 04-22-2011, 12:57 PM   #4
TSF Enthusiast
 
Acer2000's Avatar
 
Join Date: Sep 2006
Posts: 1,353
OS: Windows 8.1



Hi Laxer,

I would like to learn how to use CSS to create a website. I have question: Is a website created in HTML and then styled with CSS or am I getting the wrong end of the stick?

I used to create websites using MS FP 2003. All I had to do is use tables and cells and add content. Now I learn that this is outdated and frowned upon. So I am going to learn CSS coding.

I plan on creating a website from scratch. I will start with the simple editor. Do I write the HTML code first or the CSS.

I look forward to your good advice. Thank you!
Acer2000 is offline  
Old 04-22-2011, 09:03 PM   #5
TSF Team, Emeritus
 
Join Date: Dec 2010
Location: Portland, OR
Posts: 5,202
OS:

My System


Yes you are correct with your assessment about html and css.

I always start off writing the html.

something simple like:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

-->
</style>
</head>
<body>
    <div id="wrapper">
    <div id="header">HOME</div>
    <div id="nav">
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <div id="content">
    <h1>Home</h1>
    	<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
        <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
    </div>
    <div id="footer"></div>
</div>
</div>
</body>
</html>

I then go through and add my css in, first i do it embedded using the <style> tag in the head. I then transition it to its own file and include it.

For the above example here is some simple css:
Code:
body {
	font-family: arial, helvetica, verdana, Tahoma, sans-serif;
	font-size: 10px;      /* set base font in pixels here. Use em's every else  */
	padding: 0;	margin: 0;	    /* for cross browser compatibiity */
	background-color:#4F4F4F ;
}

h1,h2,h3,h4,h5,p,div,table,td,th,ul,ol,li,blockquote {
	padding: 0; 
	margin: 0;	   /* for cross browser compatibility */
}

h1 {
	font-size:3em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h2 {
	font-size:2.2em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h3 {
	font-size:1.6em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h4 {
	font-size:1.33em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h5 {
	font-size:1.1em;
	margin: 0 0 .5em 0 ;
}

h6 {
	font-size:.75em;
}

p {
	display: block;
	margin: 1em 0px;
}

#wrapper {
	width:680px;
	border:1px solid black;
	background-color:#EEE9BF;
	padding:10px;
	margin:auto auto;
}



#header {
	width:628px;
	height:65px;
	border:0px solid black;
	background-color:red;
	margin:10px auto 20px auto;
	padding:10px;
	font-size:7.2em;
}

#nav {
	width:80px;
	height:180px;
	border:0px solid black;
	background-color:none;
	float:left;
	padding:0px 10px 10px 10px; /*Top Right Bottom Left*/
	font-size: 1.2em;
}

#nav li{
	list-style:none;
	margin-bottom:3px;
}

#nav li a {
	display:block;
	background-color: #4f4f4f;
	color: #ffffff;
	font-weight:bold;
	width: 85px;
	height:17px;
	text-decoration:none;
	text-align:right;
	padding:3px;
}

#content {
	width:514px;
	border:0px solid black;
	background-color:blue;
	float:left;
	margin-left:10px;
	margin-bottom:20px;
	padding:0px 10px 0px 10px;
	font-size:1.2em;
}


#footer {
	width:628px;
	height:80px;
	border:1px solid black;
	clear:both;
	margin: 0px auto 10px auto;
	padding:10px;
}
As you can tell from above I set the browser defaults first then go through the divs.

Final result before including the css:



HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font-family: arial, helvetica, verdana, Tahoma, sans-serif;
	font-size: 10px;      /* set base font in pixels here. Use em's every else  */
	padding: 0;	margin: 0;	    /* for cross browser compatibiity */
	background-color:#4F4F4F ;
}

h1,h2,h3,h4,h5,p,div,table,td,th,ul,ol,li,blockquote {
	padding: 0; 
	margin: 0;	   /* for cross browser compatibility */
}

h1 {
	font-size:3em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h2 {
	font-size:2.2em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h3 {
	font-size:1.6em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h4 {
	font-size:1.33em;
	font-weight: bold;
  	margin: 0 0 .67em 0 ;
}

h5 {
	font-size:1.1em;
	margin: 0 0 .5em 0 ;
}

h6 {
	font-size:.75em;
}

p {
	display: block;
	margin: 1em 0px;
}

#wrapper {
	width:680px;
	border:1px solid black;
	background-color:#EEE9BF;
	padding:10px;
	margin:auto auto;
}



#header {
	width:628px;
	height:65px;
	border:0px solid black;
	background-color:red;
	margin:10px auto 20px auto;
	padding:10px;
	font-size:7.2em;
}

#nav {
	width:80px;
	height:180px;
	border:0px solid black;
	background-color:none;
	float:left;
	padding:0px 10px 10px 10px; /*Top Right Bottom Left*/
	font-size: 1.2em;
}

#nav li{
	list-style:none;
	margin-bottom:3px;
}

#nav li a {
	display:block;
	background-color: #4f4f4f;
	color: #ffffff;
	font-weight:bold;
	width: 85px;
	height:17px;
	text-decoration:none;
	text-align:right;
	padding:3px;
}

#content {
	width:514px;
	border:0px solid black;
	background-color:blue;
	float:left;
	margin-left:10px;
	margin-bottom:20px;
	padding:0px 10px 0px 10px;
	font-size:1.2em;
}


#footer {
	width:628px;
	height:80px;
	border:1px solid black;
	clear:both;
	margin: 0px auto 10px auto;
	padding:10px;
}
-->
</style>
</head>
<body>
    <div id="wrapper">
    <div id="header">HOME</div>
    <div id="nav">
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <div id="content">
    <h1>Home</h1>
    	<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
        <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
    </div>
    <div id="footer"></div>
</div>
</div>
</body>
</html>
I can't tell you the last time i had to build a simple site like that :P

All of the work i do now i script, test, clean up, then add style.

Hope that answered everything
Laxer is offline  
Old 04-23-2011, 11:20 AM   #6
TSF Enthusiast
 
Acer2000's Avatar
 
Join Date: Sep 2006
Posts: 1,353
OS: Windows 8.1



Hi Laxer,

Thank you very much for this. I will study this.
Acer2000 is offline  
Old 04-23-2011, 11:54 AM   #7
TSF Team, Emeritus
 
Join Date: Dec 2010
Location: Portland, OR
Posts: 5,202
OS:

My System


No problem, I just noticed i have one too many closing divs

Just remove one of the </div> from the end of the body.
Laxer is offline  
Old 04-23-2011, 12:07 PM   #8
TSF Enthusiast
 
Acer2000's Avatar
 
Join Date: Sep 2006
Posts: 1,353
OS: Windows 8.1



Thank you for letting me know.
Acer2000 is offline  
Closed Thread

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Similar Threads
Thread Thread Starter Forum Replies Last Post
HDD to record on.
Hi I was looking around for a low size HDD that'll be fast for recording with Fraps. On a game such as MW2 I get stable 70-90 FPS But as soon as i hit that Fraps hotkey, its an instant drop to 30-45fps and it feels terribly laggy. I was thinking of buying a new HDD to record onto, but before...
bhstr99 Hard Drive Support 9 04-03-2011 03:06 PM
Missing video drivers
Right my friend was playing Sims 3 this morning and it said there was an update, so he updated and then everything just went weird, seems like the graphics card driver was uninstalled and he could play sims 3 before but after the update it said he couldn't. I tried to find the graphics card name...
Nekoh Driver Support 10 03-26-2011 04:44 PM
Slow/Not responsive
My pc has lately as expected gone very slow and not as responsive. At the start-up especially. I have to wait a good 2mins before touching anything or things start to 'Not respond' and such. I was wondering if you guys could recommend me ANYTHING that I could do to speed up my pc significantly....
bhstr99 Windows 7 , Windows Vista Support 18 03-26-2011 03:38 PM

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is on
Smilies are on
[IMG] code is on
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Post a Question


» Site Navigation
 > FAQ
  > 10.0.0.2
Powered by vBadvanced CMPS v3.2.3


All times are GMT -7. The time now is 02:03 AM.


Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2020, vBulletin Solutions, Inc.
vBulletin Security provided by vBSecurity v2.2.2 (Pro) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.
User Alert System provided by Advanced User Tagging v3.1.0 (Pro) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.
Copyright 2001 - 2018, Tech Support Forum

Windows 10 - Windows 7 - Windows XP - Windows Vista - Trojan Removal - Spyware Removal - Virus Removal - Networking - Security - Top Web Hosts