Solved

Embed YouTube Video in Word Press

Posted on 2014-12-22
21
154 Views
Last Modified: 2014-12-23
Please see https://www.youtube.com/channel/UCGCQmRrFdS7BnXqjyVcOUbg

I want to take the two video thumbnails & put them into a WordPress site (in the size they are at there), then when one is clicked, play the video full size on the site without going to the You Tube site.

How do I do that?

Thanks
0
Comment
Question by:Richard Korts
  • 11
  • 10
21 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40513727
I would look into the Easy Modal plugin:

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

Author Comment

by:Richard Korts
ID: 40513743
Jason C. Levine,

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

Thanks
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40513745
Correct.  Apply the modal to the thumbnails, embed the video in the modal.
0
 

Author Comment

by:Richard Korts
ID: 40515106
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
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40515109
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.
0
 

Author Comment

by:Richard Korts
ID: 40515140
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
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40515147
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?
0
 

Author Comment

by:Richard Korts
ID: 40515177
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
0
 

Author Comment

by:Richard Korts
ID: 40515206
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?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40515260
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/
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:Richard Korts
ID: 40515277
Current version is 4.0.1. Based on your comments, I'll upgrade to 4.1

Thanks
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40515297
No, that won't solve the embedding issue, then.  4.01 is more than recent enough.
0
 

Author Comment

by:Richard Korts
ID: 40515344
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.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40515346
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.
0
 

Author Comment

by:Richard Korts
ID: 40515618
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.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40515629
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.
0
 

Author Comment

by:Richard Korts
ID: 40515647
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?
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 40515699
I have no clue how to do the browser "inspector". I did it, saw nothing I could interpret related to align center.

Clear as day to me:

Firefox inspect element
So the pale yellow sections above represent the caption text after the shortcode evaluates.  The short code creates divs around the text (see the HTML below the images) and sets those divs to 45% of the width with a 5% right margin (see the CSS rules lower right).  The dotted lines are the div outlines so you can see where things are supposed to be.

Your original entry in the WordPress editor was:

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

Open in new window


which is now a problem because you can't place a <div> inside of a <p>.  So when the shortcode renders, your centering <p> tag is moved outside of the divs and doesn't do anything.  

Even if we were to assume that the text centered anyway, it still wouldn't center below the videos because the videos themselves are not in the columns created by the shortcodes.

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

Test it, but I think you can just follow the above to its logical conclusion.  Put the videos and text inside of the shortcodes, then center the text there.

[one_half]
   <iframe src="//www.youtube.com/embed/Ql8_GcE9-sg" allowfullscreen="allowfullscreen" frameborder="0" height="253" width="450"></iframe>
   <p style="text-align: center;">Irrigation</p>
[/one_half]
[one_half]
   <iframe src="//www.youtube.com/embed/L0x_bnlK6ew" allowfullscreen="allowfullscreen" frameborder="0" height="253" width="450"></iframe>
   <p style="text-align: center;">Drainage</p>
[/one_half]

Open in new window


So the above has line breaks added for readability, but you will probably want to remove them when you copy/paste into the editor.  Also note that the <p> tags will center relative to the div, not the iframes so you will probably want to adjust your CSS to center any iframes found in .one_half as well.  Otherwise the text will probably still look a look a little off-center because the iframes will be left aligned without that fix.

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?

Because you didn't wrap it in the shortcode, so it rendered as entered.  So I would reiterate, the problem here isn't WordPress so much as your theme and your not quite seeing how everything interacts.
0
 

Author Closing Comment

by:Richard Korts
ID: 40515773
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
0
 

Author Comment

by:Richard Korts
ID: 40515778
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40515818
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;
}

Open 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.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

In this article, I'll explain how to setup a Plex Media Server (https://plex.tv/) on a Redhat (Centos) 7 based NAS with screenshots to help those looking for assistance.  What is Plex? If you aren't familiar with Plex, it’s a DLNA media serv…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
Viewers will learn the basics of creating custom device Racks in Ableton Live. Place instrument(s) and effects onto a track, and select them all by holding the Shift key and clicking on the device title bars: Group them by typing Command-G (Ctrl-G…
Viewers will learn how to create and use Simpler instruments in Ableton Live. Load new Simpler into an empty MIDI track: Select a sample and drop it into sample window in Simpler: If sample is not pitched at C3, adjust tuning with Transpose para…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now