Youtube player on website

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • 4

56 Replies - 1476 Views - Last Post: 18 May 2014 - 02:21 AM Rate Topic: -----

#16 astonecipher  Icon User is offline

  • D.I.C.
  • member icon

Reputation: 795
  • View blog
  • Posts: 3,484
  • Joined: 03-December 12

Re: Youtube player on website

Posted 10 May 2014 - 08:24 AM

Okay, using this,
<iframe width="640" height="360" src="//www.youtube.com/embed/MyXWalwFqyE?feature=player_detailpage" frameborder="0" allowfullscreen></iframe> 




I did manage to get it to work. However, there seems to be a browser cache issue, atleast on my development server.

Use either a private window to try it (most browsers support this now.) Or clear your history.
Was This Post Helpful? 1
  • +
  • -

#17 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 38
  • View blog
  • Posts: 897
  • Joined: 06-July 13

Re: Youtube player on website

Posted 10 May 2014 - 08:33 AM

One tip: It would be easier to use an external style sheet for CSS. I.E. mycss.css.

In your <head> add the following code:

<link rel="stylesheet" type="text/css" href="path/to/mycss.css" />



If you do want to keep the CSS in your file in <style> tags though, it should go between the <head> tags rather than the <body> - check it with the w3c validator for more info on that though. ;)

@astonecipher: Just a note: That code does work, but brings up an error on the w3c validator with HTML 5/XHTML - you should use this instead:

<iframe width="640" height="360" src="http://www.youtube.com/embed/MyXWalwFqyE" frameborder="0"></iframe>

This post has been edited by chris98: 10 May 2014 - 08:39 AM

Was This Post Helpful? 1
  • +
  • -

#18 sprokls  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 10-May 14

Re: Youtube player on website

Posted 10 May 2014 - 11:02 AM

Thank you guys! I'm going to test it now! Yeah thanks for the stylesheet-link code. I was trying to find it yesterday but didn't manage to. I'll come back with the results!

Okay so
<iframe width="640" height="360" src="http://www.youtube.com/embed/MyXWalwFqyE" frameborder="0"></iframe>
this worked

How would I position it? I want it to be in the screen like this: http://i.imgur.com/RM0lu61.png
Was This Post Helpful? 0
  • +
  • -

#19 astonecipher  Icon User is offline

  • D.I.C.
  • member icon

Reputation: 795
  • View blog
  • Posts: 3,484
  • Joined: 03-December 12

Re: Youtube player on website

Posted 10 May 2014 - 11:29 AM

You could auto margin it, margin-left: auto

But, I would give the user the option to make it full size.
Was This Post Helpful? 0
  • +
  • -

#20 chris98  Icon User is offline

  • D.I.C Addict

Reputation: 38
  • View blog
  • Posts: 897
  • Joined: 06-July 13

Re: Youtube player on website

Posted 10 May 2014 - 01:13 PM

Quote

But, I would give the user the option to make it full size.


You can't do that with the allowfullscreen because it is part of the error on the w3c validator.
Was This Post Helpful? 0
  • +
  • -

#21 sprokls  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 10-May 14

Re: Youtube player on website

Posted 10 May 2014 - 01:41 PM

So what's your suggestions?
Was This Post Helpful? 0
  • +
  • -

#22 sprokls  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 10-May 14

Re: Youtube player on website

Posted 10 May 2014 - 02:22 PM

=/
Was This Post Helpful? 0
  • +
  • -

#23 astonecipher  Icon User is offline

  • D.I.C.
  • member icon

Reputation: 795
  • View blog
  • Posts: 3,484
  • Joined: 03-December 12

Re: Youtube player on website

Posted 10 May 2014 - 02:37 PM

If the only thing the validator complains about is a allowfullscreen section you are fine. The w3c offers that tool as a service, it is under constant development, and it is not the end all for what can go on a webpage. It may just have an issue with the YouTube attribute like it has for placeholder in the past.
Was This Post Helpful? 0
  • +
  • -

#24 sprokls  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 10-May 14

Re: Youtube player on website

Posted 10 May 2014 - 06:33 PM

I don't really get it, what do I need to make it autofit in the area of the monitor? http://i.imgur.com/kTZQcoc.png it's only a picture as a background.
Was This Post Helpful? 0
  • +
  • -

#25 astonecipher  Icon User is offline

  • D.I.C.
  • member icon

Reputation: 795
  • View blog
  • Posts: 3,484
  • Joined: 03-December 12

Re: Youtube player on website

Posted 10 May 2014 - 06:35 PM

You want to do,



#id_of_element {
    margin-left: auto;
}




If that doesn't work I need to see code to see if something is being over ridden.

This post has been edited by astonecipher: 10 May 2014 - 06:36 PM

Was This Post Helpful? 0
  • +
  • -

#26 sprokls  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 10-May 14

Re: Youtube player on website

Posted 10 May 2014 - 06:45 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Media</title>
</head>
<body>
    <nav>
      <ul>
        <li>
            <a href="/home.php">Home</a>
        </li>
        <li>
            <a href="/about.php">About</a>
        </li>
        <li>
            <a href="/teams.php">Teams</a>
        </li>
        <li>
            <a href="#">Media</a>
        </li>
        <li>
            <a href="/contact.php">Contact</a>
        </li>
      </ul>
    </nav>
    </body>
<iframe width="640" height="360" src="http://www.youtube.com/embed/MyXWalwFqyE" frameborder="0"></iframe>
</html>

Media.php^


ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
color: #000;
background: #B9DDE0 url(backg3.jpg) no-repeat center;
}

body
{ 
background-image:url('http://i.imgur.com/zNmPtwU.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-size: contain;
background-position:center; 
}

^stylesheet.css
Was This Post Helpful? 0
  • +
  • -

#27 astonecipher  Icon User is offline

  • D.I.C.
  • member icon

Reputation: 795
  • View blog
  • Posts: 3,484
  • Joined: 03-December 12

Re: Youtube player on website

Posted 10 May 2014 - 06:52 PM

One of your problems is this,

    </body>
<iframe width="640" height="360" src="http://www.youtube.com/embed/MyXWalwFqyE" frameborder="0"></iframe>
</html>


Your iframe is not even in your page body. move that! I would recommend placing it in a <div> something like this,

<div id="player">
    <iframe width="640" height="360" src="http://www.youtube.com/embed/MyXWalwFqyE" frameborder="0"></iframe>
</div>


Then place this in the CSS file,

#player {
    margin-left: auto;
}

This post has been edited by astonecipher: 10 May 2014 - 06:52 PM

Was This Post Helpful? 0
  • +
  • -

#28 sprokls  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 10-May 14

Re: Youtube player on website

Posted 10 May 2014 - 06:58 PM

http://i.imgur.com/r59ACFW.jpg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Media</title>
</head>
<body>
    <nav>
      <ul>
        <li>
            <a href="/home.php">Home</a>
        </li>
        <li>
            <a href="/about.php">About</a>
        </li>
        <li>
            <a href="/teams.php">Teams</a>
        </li>
        <li>
            <a href="#">Media</a>
        </li>
        <li>
            <a href="/contact.php">Contact</a>
        </li>
      </ul>
    </nav>
	<div id="player">
	    <iframe width="640" height="360" src="http://www.youtube.com/embed/MyXWalwFqyE" frameborder="0"></iframe>
	</div>
    </body>
</html>

What am I doing wrong :(
Was This Post Helpful? 0
  • +
  • -

#29 astonecipher  Icon User is offline

  • D.I.C.
  • member icon

Reputation: 795
  • View blog
  • Posts: 3,484
  • Joined: 03-December 12

Re: Youtube player on website

Posted 10 May 2014 - 07:01 PM

Try this in your CSS file then,


#player {
  width: 650px ;
  margin-left: auto ;
  margin-right: auto ;
}


Was This Post Helpful? 0
  • +
  • -

#30 sprokls  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 10-May 14

Re: Youtube player on website

Posted 10 May 2014 - 07:12 PM

http://i.imgur.com/JiUp6FB.jpg current look, btw thanks for helping me out :)
Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • 4