I am trying to embed a youtube video on bearblog. My goal is for the video to be variable width (for viewing on phone / computer), and for youtube fullscreen capability to be enabled.
I followed the instructions here https://stackoverflow.com/a/49887085/10792715 and here YouTube iframe embed - full screen
/* Set your aspect ratio */
.video-container {
position: relative;
overflow: hidden;
height: 0;
/* width: 100%; */
padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}
.video-container iframe{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%
}
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
}
/* And set the max-width of the parent element */
.video-wrap {
width: 100%;
max-width: 600px;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
and I embedded the video as
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"
allowfullscreen></iframe>
</div>
</div>
However, even though the video is variable width, there is no fullscreen capability. It simply says
Full screen is unavailable.
Find out more
I tried all kinds of tricks
allowFullScreen="true"
allowFullScreen="allowFullScreen"
allowFullScreen
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"
but none worked.
PS. Following the advice of @Marco Aurelio Fernandez Reyes, I checked the console, and this is what I got:
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"></iframe>
</div>
</div>
i.e., the fullscreen commands are just ignored.
