How to get this video to show/play in the image?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I was wondering how to get the following code to work. There is a youtube video in the television but I can't get it to show up or play. I was wondering what the solution to this would be? Thanks!
.tv {
position: relative;
}
.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}
.video {
position: absolute;
top: 25px;
left: 20px;
}
.b {
width: 400px;
height: 300px;
} <div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
<div class="video">
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
javascript html css video embed
add a comment |
I was wondering how to get the following code to work. There is a youtube video in the television but I can't get it to show up or play. I was wondering what the solution to this would be? Thanks!
.tv {
position: relative;
}
.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}
.video {
position: absolute;
top: 25px;
left: 20px;
}
.b {
width: 400px;
height: 300px;
} <div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
<div class="video">
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
javascript html css video embed
add a comment |
I was wondering how to get the following code to work. There is a youtube video in the television but I can't get it to show up or play. I was wondering what the solution to this would be? Thanks!
.tv {
position: relative;
}
.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}
.video {
position: absolute;
top: 25px;
left: 20px;
}
.b {
width: 400px;
height: 300px;
} <div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
<div class="video">
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
javascript html css video embed
I was wondering how to get the following code to work. There is a youtube video in the television but I can't get it to show up or play. I was wondering what the solution to this would be? Thanks!
.tv {
position: relative;
}
.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}
.video {
position: absolute;
top: 25px;
left: 20px;
}
.b {
width: 400px;
height: 300px;
} <div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
<div class="video">
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
.tv {
position: relative;
}
.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}
.video {
position: absolute;
top: 25px;
left: 20px;
}
.b {
width: 400px;
height: 300px;
} <div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
<div class="video">
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
.tv {
position: relative;
}
.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}
.video {
position: absolute;
top: 25px;
left: 20px;
}
.b {
width: 400px;
height: 300px;
} <div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
<div class="video">
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
javascript html css video embed
javascript html css video embed
asked Nov 29 '18 at 6:39
gofish1234gofish1234
495
495
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
Use code as below in iframe
Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Working code
Edit to your comment!
I do not want autoplay. When I take autoplay off, the video will not
play
Use z-index to .video
Working code
If you want Round edges to video use:
.video {
position: absolute;
top: 25px;
left: 20px;
z-index:10;
border: 4px solid #000;
border-radius: 15px;
}
Working code
I do not want autoplay. When I take autoplay off, the video will not play
– gofish1234
Nov 29 '18 at 6:59
usez-index: 10;to.video:jsfiddle.net/uq27ohgj/1
– לבני מלכה
Nov 29 '18 at 7:04
see my edit please with rounded edges
– לבני מלכה
Nov 29 '18 at 7:12
Thank you! The only problem with this is that it doesn't work for mobile view?
– gofish1234
Nov 29 '18 at 7:17
what doesnot work thez-indexor?autouplay???
– לבני מלכה
Nov 29 '18 at 7:18
|
show 2 more comments
This code is very simple and understandable with a little CSS knowledge
In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.
The following links can help you:
positioning in css
iframe tag html
add a comment |
please remove position: absolute; Then Run Your Code
When I remove it, the video is no longer inside the tv image.
– gofish1234
Nov 29 '18 at 7:01
Then you Remove It Then Minimize Video Size And Adjust z-index value
– Dilip Shekhawat
Nov 29 '18 at 7:07
add a comment |
The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.
Also, as far as I know videos are no longer allowed to just auto-play, unless muted.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53533197%2fhow-to-get-this-video-to-show-play-in-the-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use code as below in iframe
Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Working code
Edit to your comment!
I do not want autoplay. When I take autoplay off, the video will not
play
Use z-index to .video
Working code
If you want Round edges to video use:
.video {
position: absolute;
top: 25px;
left: 20px;
z-index:10;
border: 4px solid #000;
border-radius: 15px;
}
Working code
I do not want autoplay. When I take autoplay off, the video will not play
– gofish1234
Nov 29 '18 at 6:59
usez-index: 10;to.video:jsfiddle.net/uq27ohgj/1
– לבני מלכה
Nov 29 '18 at 7:04
see my edit please with rounded edges
– לבני מלכה
Nov 29 '18 at 7:12
Thank you! The only problem with this is that it doesn't work for mobile view?
– gofish1234
Nov 29 '18 at 7:17
what doesnot work thez-indexor?autouplay???
– לבני מלכה
Nov 29 '18 at 7:18
|
show 2 more comments
Use code as below in iframe
Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Working code
Edit to your comment!
I do not want autoplay. When I take autoplay off, the video will not
play
Use z-index to .video
Working code
If you want Round edges to video use:
.video {
position: absolute;
top: 25px;
left: 20px;
z-index:10;
border: 4px solid #000;
border-radius: 15px;
}
Working code
I do not want autoplay. When I take autoplay off, the video will not play
– gofish1234
Nov 29 '18 at 6:59
usez-index: 10;to.video:jsfiddle.net/uq27ohgj/1
– לבני מלכה
Nov 29 '18 at 7:04
see my edit please with rounded edges
– לבני מלכה
Nov 29 '18 at 7:12
Thank you! The only problem with this is that it doesn't work for mobile view?
– gofish1234
Nov 29 '18 at 7:17
what doesnot work thez-indexor?autouplay???
– לבני מלכה
Nov 29 '18 at 7:18
|
show 2 more comments
Use code as below in iframe
Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Working code
Edit to your comment!
I do not want autoplay. When I take autoplay off, the video will not
play
Use z-index to .video
Working code
If you want Round edges to video use:
.video {
position: absolute;
top: 25px;
left: 20px;
z-index:10;
border: 4px solid #000;
border-radius: 15px;
}
Working code
Use code as below in iframe
Add ?rel=0&autoplay=1&mute=1 to src of video to autoplay:
<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Working code
Edit to your comment!
I do not want autoplay. When I take autoplay off, the video will not
play
Use z-index to .video
Working code
If you want Round edges to video use:
.video {
position: absolute;
top: 25px;
left: 20px;
z-index:10;
border: 4px solid #000;
border-radius: 15px;
}
Working code
edited Nov 29 '18 at 7:12
answered Nov 29 '18 at 6:49
לבני מלכהלבני מלכה
11.1k1927
11.1k1927
I do not want autoplay. When I take autoplay off, the video will not play
– gofish1234
Nov 29 '18 at 6:59
usez-index: 10;to.video:jsfiddle.net/uq27ohgj/1
– לבני מלכה
Nov 29 '18 at 7:04
see my edit please with rounded edges
– לבני מלכה
Nov 29 '18 at 7:12
Thank you! The only problem with this is that it doesn't work for mobile view?
– gofish1234
Nov 29 '18 at 7:17
what doesnot work thez-indexor?autouplay???
– לבני מלכה
Nov 29 '18 at 7:18
|
show 2 more comments
I do not want autoplay. When I take autoplay off, the video will not play
– gofish1234
Nov 29 '18 at 6:59
usez-index: 10;to.video:jsfiddle.net/uq27ohgj/1
– לבני מלכה
Nov 29 '18 at 7:04
see my edit please with rounded edges
– לבני מלכה
Nov 29 '18 at 7:12
Thank you! The only problem with this is that it doesn't work for mobile view?
– gofish1234
Nov 29 '18 at 7:17
what doesnot work thez-indexor?autouplay???
– לבני מלכה
Nov 29 '18 at 7:18
I do not want autoplay. When I take autoplay off, the video will not play
– gofish1234
Nov 29 '18 at 6:59
I do not want autoplay. When I take autoplay off, the video will not play
– gofish1234
Nov 29 '18 at 6:59
use
z-index: 10; to .video:jsfiddle.net/uq27ohgj/1– לבני מלכה
Nov 29 '18 at 7:04
use
z-index: 10; to .video:jsfiddle.net/uq27ohgj/1– לבני מלכה
Nov 29 '18 at 7:04
see my edit please with rounded edges
– לבני מלכה
Nov 29 '18 at 7:12
see my edit please with rounded edges
– לבני מלכה
Nov 29 '18 at 7:12
Thank you! The only problem with this is that it doesn't work for mobile view?
– gofish1234
Nov 29 '18 at 7:17
Thank you! The only problem with this is that it doesn't work for mobile view?
– gofish1234
Nov 29 '18 at 7:17
what doesnot work the
z-index or ?autouplay ???– לבני מלכה
Nov 29 '18 at 7:18
what doesnot work the
z-index or ?autouplay ???– לבני מלכה
Nov 29 '18 at 7:18
|
show 2 more comments
This code is very simple and understandable with a little CSS knowledge
In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.
The following links can help you:
positioning in css
iframe tag html
add a comment |
This code is very simple and understandable with a little CSS knowledge
In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.
The following links can help you:
positioning in css
iframe tag html
add a comment |
This code is very simple and understandable with a little CSS knowledge
In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.
The following links can help you:
positioning in css
iframe tag html
This code is very simple and understandable with a little CSS knowledge
In this code, we have a picture in a div tag called "tv" with the position of the tag "relative"
And there's an "iframe" code snippet in the code that we can add to the content of a site within a site.
Now after we have placed the "iframe" in the code, we give it the "position: absolute" in the CSS, which is to do this so that the tag will be placed as the child "" And it's easy to identify the location of the film on the television with the "top left top right" attribitions.
The following links can help you:
positioning in css
iframe tag html
answered Nov 29 '18 at 6:47
Arman BagheriArman Bagheri
1479
1479
add a comment |
add a comment |
please remove position: absolute; Then Run Your Code
When I remove it, the video is no longer inside the tv image.
– gofish1234
Nov 29 '18 at 7:01
Then you Remove It Then Minimize Video Size And Adjust z-index value
– Dilip Shekhawat
Nov 29 '18 at 7:07
add a comment |
please remove position: absolute; Then Run Your Code
When I remove it, the video is no longer inside the tv image.
– gofish1234
Nov 29 '18 at 7:01
Then you Remove It Then Minimize Video Size And Adjust z-index value
– Dilip Shekhawat
Nov 29 '18 at 7:07
add a comment |
please remove position: absolute; Then Run Your Code
please remove position: absolute; Then Run Your Code
answered Nov 29 '18 at 6:51
Dilip ShekhawatDilip Shekhawat
399
399
When I remove it, the video is no longer inside the tv image.
– gofish1234
Nov 29 '18 at 7:01
Then you Remove It Then Minimize Video Size And Adjust z-index value
– Dilip Shekhawat
Nov 29 '18 at 7:07
add a comment |
When I remove it, the video is no longer inside the tv image.
– gofish1234
Nov 29 '18 at 7:01
Then you Remove It Then Minimize Video Size And Adjust z-index value
– Dilip Shekhawat
Nov 29 '18 at 7:07
When I remove it, the video is no longer inside the tv image.
– gofish1234
Nov 29 '18 at 7:01
When I remove it, the video is no longer inside the tv image.
– gofish1234
Nov 29 '18 at 7:01
Then you Remove It Then Minimize Video Size And Adjust z-index value
– Dilip Shekhawat
Nov 29 '18 at 7:07
Then you Remove It Then Minimize Video Size And Adjust z-index value
– Dilip Shekhawat
Nov 29 '18 at 7:07
add a comment |
The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.
Also, as far as I know videos are no longer allowed to just auto-play, unless muted.
add a comment |
The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.
Also, as far as I know videos are no longer allowed to just auto-play, unless muted.
add a comment |
The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.
Also, as far as I know videos are no longer allowed to just auto-play, unless muted.
The issue is that the image of the TV is sitting over the YouTube video, so there is a layer blocking the user from clicking the play button. I would suggest moving the div class="video" forward one by adding z-index:11 to its CSS.
Also, as far as I know videos are no longer allowed to just auto-play, unless muted.
edited Nov 29 '18 at 7:49
answered Nov 29 '18 at 7:20
Kayla LampKayla Lamp
115
115
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53533197%2fhow-to-get-this-video-to-show-play-in-the-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown