Autoplaying video on a responsive site

**fasttoes** · 09 January 2017, 07:00 PM

Hi

I have recently created www.brsccff1600.co.uk

This is a responsive website with a placeholder that contains an iFrame with a YouTube video autoplaying on both versions (pc & mobile) of the home page.

If the home page loads on a pc browser with the YouTube sound setting unmuted, when the user clicks the mute button on the embedded YouTube area, the sound continues to be heard. I assume this is because the video is also playing in the iFrame code for the mobile version of the webpage although if I narrow the browser window to switch to the mobile version, the video reloads and starts afresh.

Presumably I only want the video to load and start playing when a particular version of the site is in focus. Is that possible?

Dave

**gwpriester** · 09 January 2017, 07:15 PM

Welcome to TalkGraphics Dave

I am not sure of the answer but someone will check in shortly who probably will know the answer.

I moved this thread to the Web Design Chat forum.

**Egg Bramhill** · 10 January 2017, 02:47 AM

Yes, welcome to TG Dave.

... with a placeholder that contains an iFrame with a YouTube video autoplaying ...

I wouldn't recommend this at all, especially on a mobile variant. Your visitors will not be happy with you hoggining their preciuos data download allotment! Give them the option to view but don't autoplay.

If the home page loads on a pc browser with the YouTube sound setting unmuted, when the user clicks the mute button on the embedded YouTube area, the sound continues to be heard. I assume this is because the video is also playing in the iFrame code for the mobile version of the webpage although if I narrow the browser window to switch to the mobile version, the video reloads and starts afresh.

There is only one version of your website. Dependant on the visitors viewing device the correct html version is delivered to them. That's to say there isn't a desktop, laptop, tablet & mobile versions. Just one website delivered via html dependant on their viewing platform.

How are you getting the YouTube video to autoplay? I notice in the source code you have:

Try avoiding the autoplay using:

**fasttoes** · 10 January 2017, 10:14 AM

Many thanks for your reply Egg

Firstly, that's a good point about using up the data allowance on a mobile device. I have set "autoplay=0" on the mobile version of the site. The client does, however, want the video to start automatically on the pc version.

The problem is now, on the mobile version, although you have to click the video to start playing it, you can still hear the music in the background when the video isn't playing. It's as though the pc version of the video is playing - thus it is still using data.

I understand what you mean about having one version of a website that reformats according to the device it is accessed via (from googling it I believe that is done through CSS) but Xara doesn't seem to work that way. In a pc browser, if you right click on the www.brsccff1600.co.uk website and select "View Source" then search for "iframe" you'll see there are two separate iframe commands for running that video. They now differ in that the second instance (the mobile version) has autoplay=0. It does appears as though Xara is building two versions of the website when it generates the HTML (hopefully I am doing something wrong and it will be an easy fix!)

**fasttoes** · 11 January 2017, 09:31 PM

I have fixed the problem. I replace the src parameter of the iFrame with "" for the variant that is not active. Had to have a crash course in JavaScript functions! If anyone else has the same problem here is what I did:

For the pc version, I set up this function in the header

<script>
function wideVideo() {
var scrWidth = window.innerWidth;
var reqsrc;
if (scrWidth > 900) {
reqsrc = "https://www.youtube.com/embed/gx_NVTxs_UQ?rel=0&autoplay=1&end=63&loop=1&playlis t=gx_NVTxs_UQ" frameborder="0" allowfullscreen="1"";
} else {
reqsrc = "";
}
document.getElementById("pcFrame").src = reqsrc;
}
</script>

In the body section, the src parameter of the iFrame is overwritten when the function is called

<iframe id="pcFrame" width="448" height="252" src="https://www.youtube.com/embed/gx_NVTxs_UQ?rel=0&autoplay=1&end=63&loop=1&playlis t=gx_NVTxs_UQ" frameborder="0" allowfullscreen="1"></iframe>

<script type="text/javascript">
wideVideo();
</script>

For the mobile variant, I did the same thing but the if (scrWidth > 900 test in that function is <= 900.

The one downside is, if the window is resized smaller or larger than 900 pixels wide then the blank version of the iFrame appears when the site reformats, it needs a refresh to reload the video, but I can't imagine that would happen very often.