[ASK] All in One | Coding help | XtGem

Mwebvendor

Graham Its dinner time,,, ill be right back...

# 2017-04-14 18:40 · (0)

Mwebvendor

Graham Why is not playing? if a click the play button? can you check this?
http://flickvid.com/update

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Play</title>
    <link rel="stylesheet" href="/update/css.css">
</head>
<body>
<div class="container">

    <div class="video-wrapper">
        <div class="embed-responsive embed-responsive-16by9">
            <embed class="embed-responsive-item" src="https://video.google.com/get_player?docid=0B2WVxZoN_MWSM0pMOUd1TmNnaTg&ps=docs&partnerid=30" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="500" height="400"></embed>
        </div>
    </div>
</div>
<script src="/update/js_3.js"></script>
</body>
</html>

Copy code

CSS

.video-wrapper {
    position: relative;
}

.video-wrapper > embed {
    width: 100%;
    vertical-align: middle;
}

.video-wrapper > embed.has-media-controls-hidden::-webkit-media-controls {
    display: none;
}

.video-overlay-play-button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px calc(50% - 50px);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.95;
    cursor: pointer;
    background-image: linear-gradient(transparent, #000);
    transition: opacity 150ms;
}

.video-overlay-play-button:hover {
    opacity: 1;
}

.video-overlay-play-button.is-hidden {
    display: none;
}

Copy code

JS

var videoPlayButton,
    videoWrapper = document.getElementsByClassName('video-wrapper')[0],
    embed = document.getElementsByTagName('embed')[0],
    videoMethods = {
        renderVideoPlayButton: function() {
            if (videoWrapper.contains(embed)) {
                this.formatVideoPlayButton()
                embed.classList.add('has-media-controls-hidden')
                videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
                videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
            }
        },

        formatVideoPlayButton: function() {
            videoWrapper.insertAdjacentHTML('beforeend', '\
                <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
                    <circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
                    <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
                </svg>\
            ')
        },

        hideVideoPlayButton: function() {
            embed.play()
            videoPlayButton.classList.add('is-hidden')
            embed.classList.remove('has-media-controls-hidden')
            embed.setAttribute('controls', 'controls')
        }
    }

videoMethods.renderVideoPlayButton()

Copy code

# 2017-04-14 18:39 · (0)

Graham

Mwebvendor I dont think you really can without getting into major coding of custom plugins using php java etc
not all browsers /platforms even use flash some like chrome mostly use html5

# 2017-04-14 17:58 · (0)

Mwebvendor Graham.Any idea how to change the center play button in a flash player? using js or else?

# 2017-04-14 17:26 · (0)