How do I use an iFrame for my header in Wordpress twenty seventeen?

I'm pretty new to Wordpress, and I'm currently trying to make a site using the twenty-seventeen template. My ultimate goal is to use an iFrame of a sketch I made in p5 as my header media, so that when people visit the site they see a cool interactive piece instead of just a static image. Does anyone here know how to do that? I'm comfortable doing some hand coding, but I'm pretty unfamiliar with php.

For reference, the site I'm working on is up at http://www.staging3.robinseggstudio.com, and the sketch I'm trying to replace the image with is up at http://robinseggstudio.com/homePage_12-5c/RobinSketch/.

The site is hosted on Siteground.

Thanks!

Topic iframe headers php themes Wordpress

Category Web

1
answered at

This is possible, but it's not a best practice. Animations are cool, but iframes add complications and slow down the page load speed.

If you want to see what it looks like, edit this file:

../wp-content/themes/twentyseventeen/template-parts/header/header-image.php

And change the custom header div to this:

<div class="custom-header">

    <iframe scrolling="no" width="100%" height="1000px" src="http://robinseggstudio.com/homePage_12-5c/RobinSketch/"></iframe>

</div><!-- .custom-header -->

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.