www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to have a You Tube video play right on a page of my site?

  1. #1
    Join Date
    Aug 2013
    Posts
    5

    How to have a You Tube video play right on a page of my site?

    The page is http://www.rcblue.com/Music/YouTube/YouTube.htm
    I'd like the Ligeti video, http://www.youtube.com/watch?feature...&v=ECC6l7fAhJQ , to appear at about 400x550 size at the very top of the page. It should show one image of the video and have that big right-pointing triangle to click to start the video.

    How should I code this (in HTML5)?

    Thanks

  2. #2
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    Quote Originally Posted by Newbie7 View Post
    The page is http://www.rcblue.com/Music/YouTube/YouTube.htm
    I'd like the Ligeti video, http://www.youtube.com/watch?feature...&v=ECC6l7fAhJQ , to appear at about 400x550 size at the very top of the page. It should show one image of the video and have that big right-pointing triangle to click to start the video.

    How should I code this (in HTML5)?

    Thanks
    YouTube seems to be encouraging folks to use iframes lately, so this would be your code:
    HTML Code:
    <iframe width="550" height="400" src="//www.youtube.com/embed/ECC6l7fAhJQ" frameborder="0" allowfullscreen></iframe>
    Or...
    You can do this:
    HTML Code:
    <object width="550" height="400"><param name="movie" value="//www.youtube.com/v/ECC6l7fAhJQ?hl=en_US&amp;version=3&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/ECC6l7fAhJQ?hl=en_US&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="550" height="400" allowscriptaccess="always" allowfullscreen="true"></embed></object>
    Or...
    if you want it to autoplay, that is start automatically when the page is opened...
    HTML Code:
    <object width="550" height="400"><param name="movie" value="//www.youtube.com/v/ECC6l7fAhJQ?hl=en_US&amp;version=3&autoplay=1&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/ECC6l7fAhJQ?hl=en_US&amp;version=3&autoplay=1&amp;rel=0" type="application/x-shockwave-flash" width="550" height="400" allowscriptaccess="always" allowfullscreen="true"></embed></object>
    To make an embedded video autoplay, add “&autoplay=1” to the video’s embed code, right after the video ID (the series of letters that follows “v/”).

  3. #3
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096

  4. #4
    Join Date
    Aug 2013
    Posts
    5
    Thanks very much! One question about the iframe code: Someone told me that the should be a "?rel=0" after the video id. Thus:
    <iframe width="550" height="400" src="//www.youtube.com/embed/ECC6l7fAhJQ?rel=0" frameborder="0" allowfullscreen></iframe>
    I see that it is not needed in my case, but what does ?rel=0 do?

  5. #5
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    rel=0 disables related videos from showing after yours is done.

  6. #6
    Join Date
    Aug 2013
    Posts
    5
    Quote Originally Posted by donatello View Post
    rel=0 disables related videos from showing after yours is done.
    And the '?' ?

    Thanks

  7. #7
    Join Date
    Aug 2013
    Posts
    2
    thanks for sharing this tutorial is very useful for me this type of tutorial i was searching last Monday.

  8. #8
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    The ? mark simply answers a query as it shows that what follows fills some variables. This identifies what is known as a query string.

Thread Information

Users Browsing this Thread

There are currently 6 users browsing this thread. (0 members and 6 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles