Now that you’ve seen how to use a text widget to enter an opt-in form, let’s add a video to a text widget.
Sizing of the Video is Important
The best place to start this process off is by making sure we know how wide that space needs to be. In Twenty Thirteen to insert an image in there it is 300 minus 40. So it is 260 pixels wide.
How to Measure the Pixel Width
Dennis asks, “How do I measure the pixel width?” If you know how to use Chrome developer tools you can use Chrome to do it. That’s what I do, I just right click on the section and hit inspect element. I just make sure I have selected the element that I want to look at and then look at the width that’s given to me.
At the bottom there it says it’s 300 pixels wide and then if you look at down here it says the padding is 20 pixels so you subtract padding from both sides that’s 300 pixels minus 20 minus 20 which is 260.
Read the Theme Documentation
You’re better off just reading the documentation on the theme to find out what those sizes are, it’s just very simple for me to do this but it’s a skill set you have to develop otherwise.
Using Chrome vs Firefox for Inspecting Elements
You ask, do I like Chrome’s better than Firefox’s? Yes, I do like Chrome’s better than Firefox’s Developer Tools for lots of reasons but because I’m an advanced user I can live with Chrome’s failures. When I teach this kind of thing to beginners I do use Firefox because Firefox has some things that are spectacular for beginners that are hard to beat.
However, one of the things it does not do is it does not actually tell you the size of things when you hover over them like that. It shows you them but it doesn’t tell you how big they are. You might be able to use the computed rule here to find the size but it just doesn’t tell you how big it is. Firefox does some things really nicely that Chrome doesn’t do and so I do generally teach this with Firefox with beginners.
Add iframe for the Video
Let’s go to YouTube and look at the “Dying wish” video. Then come down here to share and we’ll use the embed version and grab that iframe. Let’s give it a custom size and that custom size was 260. Now we can grab that iframe and come back over to the text widgets.
Go to Appearance and Widgets and add a text widget with the iframe, add the title “Mitchell & Webb”. Save the widget and let’s look at the page. Now you have the video in there in the right size. It’s simply a matter of picking the iframe to add inside of your widget.
Let’s see if we use the visual editor widget instead, again that’s the Black Studio TinyMCE one, if we can just use the straight URL. The text widgets won’t process it. Grab the URL for the video and paste that in there, hit save and we’ll see if the visual editor can parse that video. So it does parse the video but it doesn’t set the size up right so you’re better off using the iframe system where you can set the proper width of the video.