Youtube background iframe or full video (advise please)?

HTML & CSS
1

I’m being requested to set up a YouTube iframe to play on click. There is a background image element overlaying the YouTube iframe (a separate block), then the user clicks the action button (another separate element) to play the video (something I’m not familiar with).

But the downside is that the YouTube iframe is small and is terrible to see on a full width/height screen (I’m being asked to set it up full screen width/height).

So I see these as my options (I’m open to suggestions):

  1. Get the full video and embed it on the page (provided that it is in an appropriate format for full width/height) and use jQuery to fade the background image overlay and activate the video. I also understand that this can be taxing on page load.
  2. Get a different YouTube video that is full width/height to fit within the screen ratio and figure out how to activate it with a button (I found this that may work: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop)
  3. Other suggestions?
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.