0

I am using the below HTML code on my web page:

Html

<iframe id="okplayer" style="position: fixed; left: -10%; top: -10%; overflow: hidden; z-index: -999; height: 120%; width: 120%; opacity: 1; display: none;" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/mJY4rHEtohM?autohide=1&amp;autoplay=0&amp;cc_load_policy=0&amp;controls=3&amp;enablejsapi=1&amp;fs=0&amp;modestbranding=1&amp;origin=http%3A%2F%2Fwww.panaramica.com&amp;iv_load_policy=3&amp;loop=1&amp;showinfo=0&amp;rel=0&amp;wmode=opaque&amp;hd=1&amp;widgetid=1" width="640" height="360" frameborder="0"></iframe>

But the video does not show on iPhone/iPad, and Android mobile devices.

PD: The HTML belongs to a wordpress theme, so i prefer not touch it, if this is possible.

Thanks!!

goliveirab
  • 3
  • 1
  • 4

1 Answers1

0

Ok, I am didn't really understand the last 2 sentences. But here is some code that will work. It would also be better if you would embed the video rather than copying the video link from the address bar because the embed link already has all the functions you need for the video width and height.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
    <link rel="stylesheet" href="style.css">
    <div class="videoWrapper">
    <iframe width="560" height="349" src="https://www.youtube.com/embed/mJY4rHEtohM" frameborder="0" allowfullscreen></iframe>
</div>
</head>
</html>

CSS:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* Use 75% for 4:3 videos */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

If your are just going with the video you wont need the other css code from your end, all you need is what I have. I tried this on my iPad and my Android phone and it works perfectly.

Shiv Patel
  • 23
  • 6
  • Thank you, i will try this. – goliveirab Oct 14 '16 at 12:57
  • But the problem is that this video autoplay in PC, but not in mobile devices (i undesrtand this is a default behavior); but i need a way to show the video: maybe show an image and a play button so the user can play it if he/she wants ? (Sorry for the double comment) – goliveirab Oct 14 '16 at 13:01
  • I just realize that the – goliveirab Oct 15 '16 at 19:28
  • Ok, so first go to pshivvylink.pe.hu and click on test.html. It will work on your phone and pc. And as far as autoplay is concerned all you need to do is right after the video link ends and before the end quote just add a question mark and without space add autolay=1 which will set it to autoplay. Ex: youtube.com/hguHvjr?autoplay=1. The link is fake of course and the site I mentioned is one I made just as a test. – Shiv Patel Oct 17 '16 at 05:55
  • Sorry for double commenting but it looks like autoplay works on desktop browser, From what I have heard and here is the link http://stackoverflow.com/questions/3009888/autoplay-audio-files-on-an-ipad-with-html5/3056220#3056220 and http://stackoverflow.com/questions/8141652/youtube-embedded-video-autoplay-feature-not-working-in-iphone/8142187#8142187. It says apple doesn't want autoplay videos and neither does android because it uses too much data. I made the site so it would autoplay the video and it did on my laptop and my pc but not on my android phone and my ipad. – Shiv Patel Oct 17 '16 at 06:03
  • The 1 in the first comment refers to on and if autoplay=0 then 0 would be off, just link binary but it would be not logical to make autoplay=0 because you would need it in the first place unless you would want to change it later on. Here are some other settings you can add to the iframe. https://developers.google.com/youtube/player_parameter on this site you will find a lot of other options on the side bar on the right. You can click on them and get more info on them. – Shiv Patel Oct 17 '16 at 06:12