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.
Susancea
Posts: 0
Joined: 29 Jan 2009, 10:05

Embedding Youtube in a Quark Web Layout?

Post by Susancea » 07 May 2013, 03:44

Where is the text box referenced above?And what HTML editor do you reco?

Susancea
Posts: 0
Joined: 29 Jan 2009, 10:05

Embedding Youtube in a Quark Web Layout?

Post by Susancea » 07 May 2013, 03:45

I'm trying to embed in a web layout.

Randy Brown
Posts: 1
Joined: 28 Aug 2010, 19:36

Embedding Youtube in a Quark Web Layout?

Post by Randy Brown » 07 May 2013, 04:38

Hello,
I know how to do this. You can email me directly at:
[url=mailto:randyraybrown@hotmail.com]randyraybrown@hotmail.com[/url]
Might be faster this way!
Take care,
Randy

shaharaperil
Posts: 54
Joined: 01 Jan 2011, 22:27

Embedding Youtube in a Quark Web Layout?

Post by shaharaperil » 07 May 2013, 07:07

The text box referenced above is a text box you create in your HTML layout in the size and location of where you want the YouTube video to appear. It acts as a placeholder for the video and video embed code. When you replace the brackets in the HTML code, as mentioned above, the box is replaced with the video when viewed online.

I use Komodo Edit. It's a free download.

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

Embedding Youtube in a Quark Web Layout?

Post by Ira » 01 Jul 2013, 23:10

Okay--I have to learn how to do this later today.

Stand by and alert the police.

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

Embedding Youtube in a Quark Web Layout?

Post by Ira » 01 Jul 2013, 23:24

I'm already confused. What do I do first?

I downloaded my video editor. I have my web layout opened. And I have the page opened with the YouTube video I want to embed.

What do I do next? Grab another beer?

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

Embedding Youtube in a Quark Web Layout?

Post by Ira » 02 Jul 2013, 19:20

shaharaperil wrote:The text box referenced above is a text box you create in your HTML layout in the size and location of where you want the YouTube video to appear. It acts as a placeholder for the video and video embed code. When you replace the brackets in the HTML code, as mentioned above, the box is replaced with the video when viewed online.

I use Komodo Edit. It's a free download.


Shahara--help needed:


1) I design in Quark, and export a page to HTML, just one page with nothing on it except a text box, to later imbed a video. (The size of this box is sized to the exact size of the video.)
2) I go to YouTube and "Copy Embed Code" from the video.
3) I open my HTML page in Komodo, and replace whatever is there by pasting the above code.
4) I save page, and upload to my webserver.
5) Everything is wonderful--it works fine. Life is good. (Figuring out how to center it on the page is a different story, but first things first.)
5) I then go back to my Quark document and add a simple subhead above my text box. Export to HTML...open HTML file in Komodo...and...
6) I am now faced with lines and lines of code, and can't even find the box to embed the code again, let alone where the subhead is in relation to it.
I've heard that in Dreamweaver, there's a preview of all elements on your page, and when you click on it (that text box, for example), the relevant code is automatically highlighted for your editing pleasure. So if I had a page with ten embedded videos, I could easily click on the boxes of my choice (not the code, the actual boxes) to change the embed code.
Can Kimodo do this for me, or am I going to need something like Microsoft Expressions to make this happen? I am a cheap, poor shmuck, so if I can do this with Kimodo, that's my preference.
Is there something in my preview window in Komodo that I'm doing wrong, that my prefs aren't set up properly? Should I be able to indeed click on items in the preview pane, and see the relevant code highlighted in the code pane above?
Thanks for your help!
(And when I copy and paster the embed code from YouTube, I'm getting the correct arrow brackets. I don't have to replace that other stuff.)

User avatar
omegaman
Posts: 489
Joined: 08 Jun 2012, 20:22
Location: Penrith NSW Australia
Contact:

Embedding Youtube in a Quark Web Layout?

Post by omegaman » 04 Jul 2013, 18:04

Ira wrote:
shaharaperil wrote:The text box referenced above is a text box you create in your HTML layout in the size and location of where you want the YouTube video to appear. It acts as a placeholder for the video and video embed code. When you replace the brackets in the HTML code, as mentioned above, the box is replaced with the video when viewed online.

I use Komodo Edit. It's a free download.


Shahara--help needed:


1) I design in Quark, and export a page to HTML, just one page with nothing on it except a text box, to later imbed a video. (The size of this box is sized to the exact size of the video.)
2) I go to YouTube and "Copy Embed Code" from the video.
3) I open my HTML page in Komodo, and replace whatever is there by pasting the above code.
4) I save page, and upload to my webserver.
5) Everything is wonderful--it works fine. Life is good. (Figuring out how to center it on the page is a different story, but first things first.)
5) I then go back to my Quark document and add a simple subhead above my text box. Export to HTML...open HTML file in Komodo...and...
6) I am now faced with lines and lines of code, and can't even find the box to embed the code again, let alone where the subhead is in relation to it.
I've heard that in Dreamweaver, there's a preview of all elements on your page, and when you click on it (that text box, for example), the relevant code is automatically highlighted for your editing pleasure. So if I had a page with ten embedded videos, I could easily click on the boxes of my choice (not the code, the actual boxes) to change the embed code.
Can Kimodo do this for me, or am I going to need something like Microsoft Expressions to make this happen? I am a cheap, poor shmuck, so if I can do this with Kimodo, that's my preference.
Is there something in my preview window in Komodo that I'm doing wrong, that my prefs aren't set up properly? Should I be able to indeed click on items in the preview pane, and see the relevant code highlighted in the code pane above?
Thanks for your help!
(And when I copy and paster the embed code from YouTube, I'm getting the correct arrow brackets. I don't have to replace that other stuff.)


Place a div tags around the embed code and make the div the same width as the embedded video then center it e.g.: THE EMBEDDED YOUTUBE CODE You can also set the top and bottom margins to space it from the preceding item and following item, just enter a pixel amount as in: 20px auto 20px auto

User avatar
omegaman
Posts: 489
Joined: 08 Jun 2012, 20:22
Location: Penrith NSW Australia
Contact:

Embedding Youtube in a Quark Web Layout?

Post by omegaman » 04 Jul 2013, 23:27

Ok keeps dropping the html markup so:
manually style the div tag by applying a style to it: ie style="width:350px;margin:0 auto 0 auto;" this goes before the closing > of the the first part of the div tag.

shaharaperil
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.

Locked

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