Earlier today at Midwest Sports Fans, I wanted to embed a YouTube video at a specific time stamp.
It is a very simple process, but it dawned me that the vast majority – maybe all – of our writers at MSF would not know how to do this. And these are folks who have been moonlighting in WordPress for several years now.
Which led me to think that maybe some of you would find a few quick and dirty YouTube tips helpful.
Disclaimer: I am a writer, not a coder. Everything I have learned about HTML and WordPress I have learned through Google and by trial and error. So, while the following tips work for me, I fully acknowledge that there may be better, more efficient ways of achieving the same end result. If so, I ask those more savvy than I to please post liberally in the comment section of this post.
1. How to Link to a YouTube Video
with a Specific Time Stamp
Sometimes you want to link out to a YouTube video at a specific time stamp, but you don’t actually want to embed it in your post and distract readers.
To do this, simply append the YouTube URL with this text: #t=XmYs.
So, for example, let’s say that you are new to the Internet and just found out about RickRolling. But rather than link people to the beginning of the video – how worn out and lame is that!? – you want to link people to one of the funnier sequences: Rick Astley, sporting all denim, top button buttoned, goofy sunglasses on, grooving out in front of a chain link fence. This is immediately followed by Astley decked out in all black and a trench coat grooving similarly in some kind of faux dark alley.
It’s the most Rick Astley thing ever.
To this, you would need to link to the 2:01 mark of the video. The new URL would be:
https://www.youtube.com/watch?v=dQw4w9WgXcQ#t=2m01s.
Note that it is “01s” rather than simply “1s.” If the seconds are fewer than ten, the zero must be included.
Simple right?
2. How to Embed a YouTube Video
with a Specific Time Stamp
Embedding a YouTube video at a specific time stamp is close to as simple, especially now that the <iframe> embed code has become YouTube’s default.
New Embed Code
To embed the video above, the first step is to get the embed code. (This is located just underneath the video itself on the YouTube page.)
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=dQw4w9WgXcQ” frameborder=”0″ allowfullscreen></iframe>
You will notice that the URL in the embed code is the same as the original pre-stamped URL above that we linked to above. To embed to a specific time stamp using the <iframe> code, just append the URL in exactly the same way:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=dQw4w9WgXcQ#t=2m01s” frameborder=”0″ allowfullscreen></iframe>
And I’m already glad that I decided to write this post, because I did not know about that method until just now, via Techably.
Using Old Embed Code
Previously, I had used the old embed code because it is what I was comfortable with.
Embedding at a specific time stamp using the old code requires several extra steps:
- You have to check the “Use old embed code” box in the Embed menu at YouTube.
- You have to append two URLs as opposed to just one.
- You have to append the URLs differently than when just linking to a time-stamped video, requiring you to learn/memorize two different methods.
This is how you would embed the same video at the same time stamp using the old embed code:
<object width=”420″ height=”315″><param name=”movie” value=”http://www.youtube.com/v/dQw4w9WgXcQ?version=3&hl=en_US&start=121“></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/dQw4w9WgXcQ?version=3&hl=en_US&start=121” type=”application/x-shockwave-flash” width=”420″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>
Notice how instead of 2m01s it is simply “121”? Yes, time stamping using the old embed code requires math skills as well.
Work smarter, not harder, as they say. Use the new embed code.
3. How to Center an Embedded YouTube Video
This one flummoxed me for a long time.
I figured I should just be able to click on the big yellow video placeholder that appears once you toggle over to the Visual editor after pasting the embed code, but that never worked.
Then I found out about the <center> HTML tag, and it became an easy task.
So, using our embed code from above, if you wanted the video centered you would just add an opening and closing <center> tag to the beginning an end of the code.
<center><iframe width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=dQw4w9WgXcQ#t=2m01s” frameborder=”0″ allowfullscreen></iframe></center>
Voila. It’s that simple.
You do this, obviously, in the HTML editor, and you’ll know it worked when you toggle over to the Visual editor and see the yellow video placeholder in the center.
Once published it should look this:
There’s an easy way to fix this.
Bonus: Space Out the Text Underneath a Video
Underneath the yellow video placeholder in the Visual editor, just hit “Enter” to create an extra space before the text. This will give you one line’s worth of space underneath the video and will be much easier on the eyes.
Alternatively, you can add stars (***) or dashes (—) underneath the video and center them. This provides a nice, smooth break from the video to the ensuing text.
My personal rule of thumb: if the text below the video directly relates to the video itself, I just add the space; if the text below the video moves onto another subject, I add the stars or dashes to give a visual cue that we are moving onto something else.
*****
Have you found any trips or tricks for posting YouTube videos? If so, please throw them in the comments below.