WordPress.org

Ready to get started?Download WordPress

Forums

Fallback Image On iPhone Not Showing (3 posts)

  1. gregfielding
    Member
    Posted 3 months ago #

    I don't want the fullscreen video to show on mobile devices and want an image instead. The video works great on a computer, but it's just black on a mobile device.

    Any ideas what I'm doing wrong? Thanks!

    Link

    <section id="intro" class="content-section intro-section">
    <div class="pane-wrapper">
                    <div class="primary-pane">
                        <img src="http://cerdaevents.com/wp-content/uploads/2014/05/hbwhiteoutline.png" alt="" class="logo">
                    </div>
                </div>
    <div id="video-container">
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" style="position:absolute; height:auto; width:100%;">
    
     <source src="http://cerdaevents.com/wp-content/themes/wordpress-bootstrap-master/videos/happy06-8262013.webm" type="video/webm"> <source src="http://cerdaevents.com/wp-content/themes/wordpress-bootstrap-master/videos/happy06-8262013.oggtheora.ogv" type="video/ogv">
    
    <img src="http://cerdaevents.com/wp-content/uploads/2014/05/coachella-2014-wallpaper-1024x763.jpg" style="min-width:100%; height:auto">
    </video>
    </div>
    
            </section>

    And some CSS

    .video .intro-section {
    background: #3b4347;
    background-image: none;
    }
    
    .intro-section {
    background: transparent url('http://www.agentrecommend.com/wp-content/uploads/2014/04/coachellapurple.png') no-repeat center center;
    background-size: cover;
    background-color: #3b4347;
    color: #fff;
    padding: 0;
    position: relative;
    height: 100%;
    min-height: 100%;
    }
    
    #video-container {
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    }
  2. Andrew
    Forum Moderator
    Posted 3 months ago #

    Not sure what style you're referring to as not working.

  3. gregfielding
    Member
    Posted 3 months ago #

    It's the image in the video container that I am hoping will load on an iphone.

Reply

You must log in to post.

About this Topic