Embed only part of a web page into Stacks

(Giff Meyer) #1

I want to embed part of a web page into a stack. So this means I need to be able to determine exactly which part of the page is viewable. In my example I want to embed a page, but cutoff the navbar, the footer, and crop the sides as well.

I used to do this with Blocks, but that became problematic and I’d like to keep it to just Stacks. Thanks.

(Brandon Scott Corlett) #2

Where are you looking to embed the page and what id the source of the embedded content?

(Giff Meyer) #3

Here is my test page: http://cptproductiondesign.com/test4/

The middle box on the page is another website that’s embedded. I used Stacks4Stacks “Embed” stack to insert this. But I want to crop the top banner (the gray bar that says “Wizzo & Co.”) and the crop the bottom bar with the XML feed, RSS, etc. Any tips?

I believe the Div ID is “presentation”

(Brandon Scott Corlett) #4

I have tried to find a way to alter content in an iframe in the past.

From what I understand this is not easy to do, if it is even possible, due to security standards.

Is the embed site one of yours?

What is the overall goal you are looking to achieve? There may be some alternate solutions that would be of greater value to you.



(Giff Meyer) #5

The site I’m embedding is a video host site that has my content. I was just trying to frame out most of their page. I’ve done this before using Blocks to crop an iFrame. But Blocks has caused me a lot of issues so I was trying to migrate everything to Stacks. I could try it again though.

(Brandon Scott Corlett) #6

Are you required to use that video hosting site or are you open to alternate solutions?

@joeworkman’s Vimeo Wall stack would be a much cleaner and responsive solution.

(Mathew Mitchell) #7

@thebiggestapple Most video host sites (YouTube, Vimeo, Wistia, etc.) provide users with embed codes so their videos can be seen elsewhere. What’s the service you are using? They really don’t provide embed codes?

(Giff Meyer) #8

The service is https://chillibean.tv

The do provide embed code, but then it doesn’t display the carousel of thumbnails below the video. So I would need a Stack that can crop a page.

(Mathew Mitchell) #9

Well, if they provide an embed code then that’s fantastic. Why do you need the carousel of thumbnails? What specifically are you trying to accomplish?

I know these may sound like daft questions but it seems like you are really asking a website (yours) to do much more than it’s really capable of with iFrame cropping and/or any cropping of a page. My guess is that’s a fruitless and maddening endeavor.

… but there are ways to display a grid of other videos through various means. Perhaps you could give a screenshot of what you are looking to accomplish. My guess is another design alternative will work much better for you, but we’d need to actually see what you are trying to accomplish. It would also be useful to know about how many videos you have, how many you’d like to show in a carousel or grid, and any other relevant design details.

(Pedro Perdomo M.) #10

Just guessing if “Light Page” might be useful for you. https://nickcatesdesign.com/preview/rapidweaver/lightpage/example/video-collection/


(Giff Meyer) #11

Mathew, I need to display the carousel because it is a video reel and people need to be able to select videos instead of watching them in sequence.

FYI, I will explain the workaround I came up with:

  1. Create an iFrame and define the URL and dimensions of the page you want to embed. I cropped it down as much as possible, but the header was still visible.
  2. Then create a Blocks page and use the Page tool to link to a page. Define the page as the iFrame that was just created.
  3. Then move the Page box you create to a position that crops the remaining iFrame content. So I dragged it upwards so it crops off the top of the page.
  4. I created a Stacks page within my Foundation template and used PlusKit to display the Blocks page which displays the iFrame.

Mission accomplished!