avoid automatic jump to bottom on page with iframe video - iframe

Question

I have a video showing on a page like this
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="{{skin url="video/hande.mp4"}}"></iframe>
</div>
but when loading the page on tablet / mobile the page automatically jumps to the bottom where the video is. I tried adding something like this
<iframe style="display: none;" onload="this.style.display='block';" href="..."></iframe>
following from this question iframe on the page bottom: avoid automatic scroll of the page but the suggestions on there don't work for me.
Can anyone point me in the right direction? Thank you

Answer 1

UPDATE
The OP has found an acceptable solution by utilizing scrollTo:
<script type="text/javascript">
// <![CDATA[ window.onload = function(){ window.scrollTo(0,0); }// ]]>
</script>
which seems to work, there's a bit of a delay though so its not great but so far its the only thing that seems to have worked.
So to add to OP's solution, try:
<script>
// <![CDATA[ document.addEventListener("DOMContentLoaded", function(){ window.scrollTo(0,0); }, false )// ]]>
</script>
Using window.onload means your function will be called after everything else has loaded; DOM, images, script, etc.
Using DOMContentLoaded means your function will be called after the DOM has loaded (which means after any iframes have loaded, which is usually the slowest part of the DOM content). What it doesn't wait for is script, so make sure you place the YouTube script before this line. There are exceptions of course see ARTICLE
UPDATE
It seems that the focus event could be the culprit so what you can do is offer the browser to focus on something else.
Create a temporary transparent input while page is loading.
When the page is fully loaded, use a callback to remove the input.
Forgot to actually update the snippet...so it's added now.
Try this snippet below. View in 'Full Page'. You have to scroll down to the bottom and to your right, because it ain't gonna scroll without help.
document.addEventListener('DOMContentLoaded', init, false);
window.load = function() {
var fpt = document.querySelector('.focalPoint');
fpt.parentNode.removeChild(fpt);
}
function init() {
var fpt = document.createElement('input');
document.body.appendChild(fpt);
fpt.classList.add('focalPoint');
if (fpt != document.activeElement) {
fpt.focus();
}
}
.box {
width: 50vw;
/* Arbitrary */
}
.vidWrap {
position: relative;
/* Anchor the iframe's parent */
padding-bottom: 56%;
/* This is for AR 16:9 (ie. wide screen) videos */
padding-top: 20px;
/* Offset to padding-bottom */
height: 0;
/* Makes a tight 'seal' */
overflow-y: hidden;
/* Ensures that edges aren't breached */
overflow-x: hidden;
/* As above */
-webkit-overflow-scrolling: touch;
/* For iOS7 ... not so sure about iOS8 or iOS9 */
bottom: -50vw;
/* Arbitrary. */
left: 50vw;
/* Arbitrary */
}
.vid {
overflow-x: hidden;
/* See above */
overflow-y: hidden;
/* As above */
height: 100%;
/* stretched to the edge of parent */
width: 100%;
/* As above */
position: absolute;
/* Allows control within the parent */
/* These coords will stretch the iframe seemlessly to parent's edges */
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.focalPoint {
visibility: hidden;
opacity: 0;
line-height: 0;
font-size: 0;
border: 0;
outline: 0;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
<section class="box">
<div class="vidWrap">
<iframe id="vid1" class="vid" src="http://media6000.dropshots.com/photos/1381926/20170326/023642.mp4" frameborder="0" scrolling="no" height="100%" width="100%" allowfullscreen></iframe>
</div>
</section>