Embedding Youtube in a Quark Web Layout?

Discuss the HTML4 features and Web layout provided in QuarkXPress 8 and 9 (and before).

If you are interested in HTML5 publishing, then please visit the section about Digital Publishing and look at HTML5-based apps or HTML5 Publications.
Posts: 54
Joined: 01 Jan 2011, 22:27

Embedding Youtube in a Quark Web Layout?

Post by shaharaperil » 05 Jul 2013, 04:51

1. Here are the steps using images to make this procedure a little clearer. First, you make your layout, leaving a box the same size as the video. It will look like this:

2. When you export that from Quark as an HTM document and open it using Komodo Edit, the code will look like this:

3. Notice the highlighted code above on lines 37 and 38. That ".box2" is the box you created for the video. It should show the exact height and width of the box you created for the video. You can use either the height, the width, or the term "box2" to find the code in the document that you need to replace. So, in Komodo Edit, do a find for "box2" and it will take you to every instance in the code where "box2" appears. The first instance will be the one on line 36. The next one will be the one above the code you need to replace. It will look something like this:

4. In this case, the code you need to replace appears above on line 68. In your case, it might be a different line. Notice how the code appears below the term "box2" on line 67. It also repeats the size of the box you created for the video. By searching for either "box2" or the video size, you can find the code in Komodo Edit that needs to be replaced. The part that is highlighted in gray is everything you need to delete. Make sure you don't delete the DIV tag at the end. What I usually do is delete the highlighted part and then put in a few hard returns so that I have some empty lines to place my video code.

5. Now you can go to YouTube and get your embed code. It will look like this:

6. Copy all of the YouTube video code and paste it into the HTM document in Komodo Edit. It will then look like this:

7. Notice how my "box2' statement is still there, as well as the closing div tag ("/div"). The video code will all appear on one line and runs off the screen, so you only see part of the video code in the image above. Save the HTM document and upload it to the internet. The final result will look like this:

8. These steps work for Quark 9.3. I think the process is slightly different for 9.5 because the exported HTM code is not the same. If you are using 9.5, let me know and I will double-check to see how it is different.

Posts: 287
Joined: 14 Jun 2004, 09:19

Embedding Youtube in a Quark Web Layout?

Post by Ira » 05 Jul 2013, 14:38

Thanks for taking the time to do that for me--I really appreciate it.

SInce I posted my query, I played Sherlock Holmes and kind of figured it out.

I downloaded Microsoft Web Express 4, which is available for free these days, and it offers a WYSIWYG preview pane. However, I still want to learn how to do it with Komodo as well.

My problem is I'm going to have a running web page where I keep adding videos, so every time I add one, I have to go back and do ALL the embedding again. When I go to YouTube now and right click "Copy Embed Code," I get this kind of command:

I open my HTML page in Expression, click the "Design" tab at the bottom of the window, and this brings you to your WYSIWYG display. Click on the text box, click on the "Code" tab instead of Design, paste the above, and voila--it actually works.

Because I'm going to have to do this with eventually 20, 30 videos on a single page, for now, I'm simply pasting the text for the embed code below the box--so with each HTML revision, it's right there for me to cut and paste again with each HTML revision. Of course, it doesn't look all that great (I don't care; I made it small), but I can also make it the same color as the background so it will be invisible to the viewer.

What I have to figure out now is how to CENTER the box on the page, or indent it from left at a certain fixed value. Right now, they all go flush left.

My home page is up and live as a promo for now (site is going live on Aug, 1st), but I'm going to create a blind link to my "Great Links" page and start uploading that page as well starting (my) tonight.

My home page is http://www.thecoralspringer.com and I'll post again here to indicate when I have the blind link active so you guys can check it out and give me your input.
Again, THANKS again...tons.

Posts: 287
Joined: 14 Jun 2004, 09:19

Embedding Youtube in a Quark Web Layout?

Post by Ira » 05 Jul 2013, 18:32


My previous post hasn't appeared yet!


Okay--back in business.

Thank you SO much for taking the time to do this. In the interim, I figured out how to do it with Expression Web 4, now available for free. (Believe me--when Microsoft offers something for nothing, I'm suspicious, but it works.)

Expressions has WYSIWYG functionality, which means you select your box in the "Display" window, switch to "Code," and paste your video code there. You don't even have to LOOK at any of the coding on the page. As long as the text box is selected, it does what you want it to do when you paste--then shows that video box on your page. It just shows the box, not the first frame or even a description, but if your web page is set up with certain subheads, accompanying body text, etc., you don't really need that anyway.

Spacing is a bit of an issue, since I have single-line headline texts that I'm exporting to graphic, a regular text box, and then the video. So it's not like I can get consistent spacing between elements up and down. I think if I do the math on box heights, and Y positions, I can get it to work. For now, it's close enough.

If you go to http://www.thecoralspringer.com ...at the very bottom of the page...you'll see text surrounded by a box rule, an alert for potential advertisers. If you put your cursor below the box rule way to the right side, you'll find a blind link to bring you to my experiments page, where I now have it all planted to fool around with.


Return to “QuarkXPress 8 & 9: Web authoring (HTML4) - discontinued”