Embed YouTube Video in Word Press

I would look into the Easy Modal plugin:

https://wordpress.org/plugins/easy-modal/

Jason C. Levine,

You are suggesting I use this to "pop up" the You Tube video "on" the page?

Thanks

Correct.  Apply the modal to the thumbnails, embed the video in the modal.

Lets back off, I am now just trying to get the (2) YouTube videos to play AT ALL in the site; seems impossible. Maybe I should open another question.

In SEVERAL references I found on the web, it says "just copy the url from YouTube into your Word Press text. It does the rest".

That is TOTAL crap. See attached. Image 1 is the text I created. Image 2 is the site preview.

Preview is of course obviously what I don't want.

Any ideas??
Image1.jpg
Image2.jpg

Okay, so if you copy the YouTube url into WordPress, you have to paste it in the Visual part (not the text part) of the editor and preferably place it by itself on a line.

Try that, see if you get the video to embed.

See attached. image5 is the preview, image6 is the editor.

FYI, I want them horizontal (on the same line), Not stacked vertically.
Image5.jpg
Image6.jpg

That's weird, I wonder why it isn't working for you.

This page (warning: intraoperative surgery videos/images may not be safe for lunch) uses three embeds via the above method and I use it all of the time.

What version of WordPress are you using, what plugins are installed?

I don't know what version, I can't figure out how to determine that. However, see image7. I guess they want me to go to 4.1 which I am reluctant to do for fear of COMPLETELY screwing up the site, no telling the consequences.

See attached plugins1 & plugins2.
Image7.jpg
plugins1.jpg
plugins2.jpg

To Jason C. Levine

This suggests using the iframe embed technique: https://www.youtube.com/watch?v=O4THpbKZ0Zg

I think I've done that on normal HTML sites previously & it worked well.

Maybe I should try that?

This suggests using the iframe embed

You certainly can try it.  Very occasionally some themes alter the visual editor to disable iframes but I doubt that's in place.

To find out which version of WordPress you have, you can look at the Dashboard and see if the "At a glance" metabox is present.  It will report the version.  If it's not present, then go to Screen Options from the Dashboard and enable it.

My guess (and based on your comments re: upgrading) is you're running an older version of WordPress and the simple URL-to-embed isn't there.  There's nothing in your plugins that should alter the behavior of the visual editor.  Your reluctance to upgrade the core is kind of misplaced...the WordPress core is stable.  What "breaks" between versions is poor/sloppy coding found in themes/plugins by people who are in full DGAF mode about standards.  When you are new to WordPress, the tendency is to install whatever you find that does the job at the time you need it and you are not as savvy about what's a good theme/plugin and what isn't.  Over time, you learn what is stable, what breaks, and who keeps their repos up to date.

A good resource to start this process (for plugins) is Tidy Repo:

http://tidyrepo.com/

Current version is 4.0.1. Based on your comments, I'll upgrade to 4.1

Thanks

No, that won't solve the embedding issue, then.  4.01 is more than recent enough.

To Jason C. Levine

I did the iframe. In visual mode it doesn't work. In text mode, it does!

Like this:

<h4 style="text-align: center;"><strong>Watch Our Videos</strong></h4><br>
<iframe src="//www.youtube.com/embed/L0x_bnlK6ew" allowfullscreen="" frameborder="0" height="253" width="450"></iframe>&nbsp;<iframe src="//www.youtube.com/embed/Ql8_GcE9-sg" allowfullscreen="" frameborder="0" height="253" width="450"></iframe>

I made them narrow enough that they would fit on one line.

I'll give you a link to the finished product.

I did the iframe. In visual mode it doesn't work. In text mode, it does!

Yeah, iframes are HTML code.  You have to enter them in the text portion.

One more thing.

I CANNOT get text to align in a title row underneath the Video links.

Here is the text:

<h4 style="text-align: center;"><strong>Watch Our Videos</strong></h4>
<iframe src="//www.youtube.com/embed/Ql8_GcE9-sg" allowfullscreen="allowfullscreen" frameborder="0" height="253" width="450"></iframe>&nbsp;<iframe src="//www.youtube.com/embed/L0x_bnlK6ew" allowfullscreen="allowfullscreen" frameborder="0" height="253" width="450"></iframe>

<p style="text-align: center;">[one_half]Irrigation[/one_half][one_half]Drainage[/one_half]</p>

The words Irrigation & Drainage are left justified. Why are they NOT centered?

WordPress is INCREDIBLY frustrating.

The words Irrigation & Drainage are left justified. Why are they NOT centered?

Can't tell without a live site to look at but it probably has to do with the shortcode you are using to attempt to align the text.  The shortcode evaluates to CSS/HTML so look at the rendered page with the browser's Inspect Element tool to see if the inline style on the p is being overridden.

WordPress is INCREDIBLY frustrating.

Misplaced.  WordPress itself isn't your issue here.  Your issue is most likely the theme or plugins you are using to speed up your development.  Relying on shortcodes and plugin-generated formatting to do things for you leaves you open to interactions and conflicts like this.

I have no clue how to do the browser "inspector". I did it, saw nothing I could interpret related to align center.

Can you see it here? http://rain1.com/new-site/

Note the title across the top (Watch Our Videos). That was done with this line:

<h4 style="text-align: center;"><strong>Watch Our Videos</strong></h4>

Why is that style NOT overridden?

How do you suggest I center those annotations UNDERNEATH the videos?

Excellent, thanks for all your help.

The customer says: "Are you able to center the embeds vs. the title and the subtitles?"

Can I "center" the content of the iframe? He sent me an image (I see I can't add an image to award comments, I'll put in in another post to this).

Thanks

2014-12-23-170421.jpg

Can I "center" the content of the iframe?

Yes, with CSS.

You would probably need to add something like this:

.one_half iframe {
       display: block;
       margin: 0 auto;
}

Select allOpen in new window

to your main CSS file for the theme.  Remember, iframe stands for "inline frame" and inline elements cannot be centered.  So we have to declare our iframes as blocks so we can then center them.